Avant d’avoir la grille native du bloc Groupe sous la main, la moindre demande client du type « trois cartes côte à côte qui passent en colonne sur mobile » impliquait d’ouvrir l’éditeur de CSS additionnel et d’écrire une media query à la main. Un réglage simple, mais qui sortait immédiatement du cadre visuel de l’éditeur de site — impossible à ajuster pour quelqu’un qui ne lit pas le CSS.
Le type de disposition Grille, disponible sur le bloc Groupe, résout ce cas précis directement depuis l’interface, avec deux logiques différentes selon le résultat recherché.
Choisir le mode de grille adapté au besoin
Après avoir inséré un bloc Groupe, le panneau Disposition de la barre latérale propose, en plus d’Empilé et Flex, l’option Grille. Deux réglages y apparaissent alors :
- Colonnes : un nombre fixe de colonnes de largeur égale, comparable à l’ancien bloc Colonnes mais avec un contrôle de l’espacement unifié.
- Largeur minimale : une grille automatique où le nombre de colonnes réellement affichées dépend de la largeur disponible, chaque colonne ne descendant jamais sous la largeur minimale indiquée.
Le second mode reproduit, sans une ligne de CSS, le comportement obtenu manuellement avec grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) — un motif extrêmement courant pour des grilles de cartes, mais jusque-là inaccessible sans passer par du code.
Étape par étape : monter une grille automatique de trois cartes
- Insérez un bloc Groupe, puis dans le panneau Disposition, sélectionnez Grille.
- Choisissez Largeur minimale et réglez-la, par exemple, à 240 pixels — chaque colonne ne descendra jamais en dessous sur grand écran.
- Insérez trois blocs Groupe imbriqués représentant chacun une carte (image, titre, texte), directement comme enfants du groupe en grille.
- Observez le comportement en réduisant la largeur de la fenêtre de l’éditeur : le nombre de colonnes affichées diminue automatiquement dès que la largeur minimale ne peut plus être respectée, sans qu’aucun réglage supplémentaire n’ait été nécessaire.
- Ajustez l’espacement entre les cellules via le réglage Espacement des blocs, commun à tous les types de disposition du bloc Groupe.
Contrôler la position et l’étendue d’un enfant
Chaque bloc enfant d’un groupe en grille manuelle (mode Colonnes) peut voir son emprise ajustée individuellement : en sélectionnant l’enfant, le panneau Disposition propose un réglage Span de colonnes (et, selon les versions, un span de lignes), permettant à une carte de s’étendre sur deux colonnes plutôt qu’une seule — utile pour mettre en avant un élément au sein d’une grille par ailleurs régulière.
Ce réglage n’a de sens qu’en mode Colonnes fixe : en mode Largeur minimale, le nombre de colonnes variant selon la largeur d’écran, un span fixe produirait un résultat imprévisible d’une résolution à l’autre.
Cas d’usage typiques
- Grille automatique par largeur minimale : galerie de logos partenaires, grille de fiches produits, liste d’articles de blog.
- Grille manuelle par nombre de colonnes, avec span : mise en avant d’un article vedette au sein d’une liste, tableau de bord de type grille de widgets.
Comportement responsive et limites actuelles
La bascule vers une colonne unique sur petit écran est un comportement intrinsèque du mode Largeur minimale : dès que l’écran devient trop étroit pour accueillir une colonne à la largeur minimale demandée, le navigateur replie naturellement la grille, sans point de rupture (breakpoint) à définir manuellement. C’est une différence de philosophie notable par rapport aux grilles à points de rupture fixes habituelles en CSS traditionnel.
En contrepartie, ce comportement n’est pas ajustable finement depuis l’interface : impossible, par exemple, de forcer exactement deux colonnes sur tablette et une seule sur mobile sans repasser par du CSS additionnel ciblant les tailles d’écran précises. Pour des besoins de mise en page plus complexes que « une grille qui se réduit naturellement », la grille manuelle par nombre de colonnes couplée à des réglages de visibilité par appareil reste, pour l’instant, la seule voie sans code personnalisé.
En résumé
La grille du bloc Groupe couvre, sans écrire de CSS, la très grande majorité des besoins de mise en page en grille rencontrés sur un site de contenu : galeries, grilles de cartes, listes de fiches. Le mode automatique par largeur minimale mérite d’être le réflexe par défaut dès qu’un comportement responsive simple suffit ; le mode manuel par colonnes, associé au span des enfants, reste réservé aux mises en page qui exigent un contrôle plus précis de la position de chaque élément.
