exemple du composant "Liste de nœuds" : comment gérer la taille des éléments ?

Le composant "Liste de nœuds" est le composant principalement utilisé.
Il sert de base à la plupart des composants proposés dans la rubrique "Composants de listes".

La configuration de ce composant passe tout d'abord par le choix de la disposition / mise en page du composant (onglet "Disposition") puis par l'apparence des éléments à afficher (onglet "Éléments").

Les deux principales dispositions utilisées sont "Grille" et "Mur".

Grille

En mode "Grille", vous devez définir la largeur des éléments dans le champ "Style du conteneur" (dans l'onglet "Éléments").

La largeur des éléments s'exprime en 12ème de l'emplacement prévu.
Si vous souhaitez une grille à 4 colonnes, il y aura 4 éléments dans la largeur, soit 12 ÷ 4 = 3 : la largeur d'un élément est de 3.

À cela s'ajoute la gestion du « responsive » (l'adaptativité).
Selon le navigateur / l'appareil utilisé par l'internaute, le site s'adapte à son écran.
Par exemple, en choisissant 4 colonnes à votre grille le contenu est trop tassé sur les smartphones et tablettes (chaque colonne ne faisant qu'un quart de l'écran) ...
Il faut donc pouvoir définir des largeurs d'éléments différentes selon l'appareil de l'internaute.

Nous utilisons pour cela différents mots clés :

xs : smartphone (<768px)

sm : tablette (≥768px)

md : ordinateur portable (≥992px)

lg : ordinateur de bureau (≥1200px)

(Il ne s'agit pas réellement d'identifier le type d'appareil utilisé par l'internaute mais plutôt la résolution de l'écran de l'utilisateur).

Au final, on définit la largeur d'un élément en fixant la largeur de la colonne (col) selon l'appareil utilisé par l'internaute (xs, sm, md, lg) en 12ème de l'emplacement prévu (1 à 12) : par exemple "col-md-3" est un élément de 3/12ème de large sur les tablettes, ordinateurs portables et bureaux.

en mode "Grille" - Style du conteneur : col-md 3 col-sm 6

De nombreux exemples sont disponibles sur le site du framework CSS utilisé : bootstrap :

Grille adaptative aux différents formats utilisés

Lorsqu'aucune largeur n'est définie, l'élément prend toute la place disponible (12/12ème).

Qui peut le moins peut le plus ! Comment ça ?!...
En effet, une définition de largeur pour une taille d'écran vaut pour les tailles supérieures :
"col-md-3" fixe la largeur sur les tablettes mais également les ordinateurs portables et ceux de bureaux.

Mur

En mode "Mur", un champ spécifique nous permet de choisir directement le nombre de colonnes désirées.

Il faut alors vider le champ "Style du conteneur" dans l'onglet "Éléments" afin de ne pas sur-contraindre la largeur des éléments.

en mode "Mur" - Style du conteneur = vide