Le Container Flexbox a changé la façon de construire des mises en page dans Elementor, on en parlait déjà l’an dernier sur ce blog au moment où il devenait le comportement par défaut. Une nouvelle option vient aujourd’hui compléter la panoplie : le Grid Container, qui s’appuie sur CSS Grid plutôt que sur Flexbox. Les deux se ressemblent en apparence, mais ils répondent à des besoins différents.
Dans ce tutoriel, je vous montre comment activer et régler un Grid Container, dans quels cas il devient plus pertinent qu’un Container Flexbox classique, et je détaille deux cas d’usage concrets qui reviennent souvent en agence : la galerie d’images et le tableau de tarifs.
Flexbox et CSS Grid : une différence d’axe, pas de vocabulaire
La distinction technique tient en une phrase : Flexbox raisonne sur un seul axe à la fois (une ligne ou une colonne), tandis que CSS Grid raisonne sur deux axes simultanément, lignes et colonnes ensemble. Concrètement, avec un Container Flexbox, vous alignez des éléments les uns à côté des autres ou les uns sous les autres, et le passage à la ligne suivante se fait de façon plus ou moins automatique selon l’espace disponible. Avec un Grid Container, vous définissez d’emblée une structure de grille avec un nombre précis de lignes et de colonnes, et chaque élément vient se positionner dans une case de cette grille.
Pour le dire autrement : Flexbox est parfait pour distribuer des éléments dans une direction, comme une barre de navigation ou une rangée de boutons. CSS Grid excelle dès que la mise en page doit s’organiser comme un vrai quadrillage, avec un contrôle précis sur la largeur de chaque colonne et la hauteur de chaque ligne.
Activer et régler un Grid Container
Pour créer un Grid Container, ajoutez un nouveau Container sur votre page puis, dans l’onglet Layout de ses réglages, choisissez le type d’affichage « Grid » à la place de « Flexbox ». Les options qui apparaissent alors changent complètement de logique par rapport au Flexbox.
Grid Template Columns: définit le nombre et la largeur des colonnesGrid Template Rows: définit le nombre et la hauteur des lignes, quand on veut un contrôle précisGap: l’espacement entre les cellules, aussi bien horizontal que verticalGrid Auto Flow: la direction dans laquelle les nouveaux éléments viennent remplir la grille
Exemple de réglages générés
Voici à quoi ressemble, en CSS, une configuration typique de trois colonnes égales avec un espacement de 24 pixels, telle que le Grid Container la produit une fois vos réglages effectués dans l’éditeur visuel :
.elementor-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
gap: 24px;
}La valeur repeat(3, 1fr) crée trois colonnes de largeur égale, qui se répartissent l’espace disponible à parts identiques. Pour une grille plus irrégulière, par exemple une colonne principale plus large que deux colonnes secondaires, on peut également définir des largeurs précises :
.elementor-grid-container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 16px;
}Dans l’éditeur, ces valeurs se règlent visuellement colonne par colonne, sans avoir à écrire de code, mais comprendre ce que représente fr (une fraction de l’espace disponible) aide grandement à anticiper le rendu avant même de tester.
Quand préférer Grid plutôt que Flexbox
La question revient souvent en formation : « je fais toujours mes mises en page en Flexbox, pourquoi changer ? ». La réponse tient à la nature du contenu à organiser. Tant qu’on aligne des éléments dans une seule direction, avec un passage à la ligne géré automatiquement selon l’espace, le Container Flexbox reste tout à fait adapté et souvent plus simple à régler.
Le Grid Container devient pertinent dès que la mise en page a une vraie structure en deux dimensions : un nombre de colonnes fixe et voulu, des lignes de hauteurs différentes qui doivent s’aligner précisément entre elles, ou des éléments qui doivent occuper plusieurs cellules à la fois (un visuel qui s’étend sur deux colonnes au milieu d’une grille, par exemple).
| Situation | Container recommandé |
|---|---|
| Barre de navigation, ligne de boutons | Flexbox |
| Galerie d’images en quadrillage régulier | Grid |
| Tableau de tarifs avec colonnes alignées | Grid |
| Bloc texte + image centré verticalement | Flexbox |
| Mise en page de type magazine avec éléments de tailles variées | Grid |
En cas de doute, posez-vous la question suivante : ai-je besoin de contrôler des lignes ET des colonnes en même temps ? Si la réponse est oui, partez du Grid Container directement, plutôt que de bricoler un résultat approchant en Flexbox.
Cas d’usage concret : la galerie d’images
Pour une galerie de douze photos affichées en quadrillage régulier de quatre colonnes sur trois lignes, le Grid Container simplifie nettement la mise en place par rapport à un Flexbox où il fallait souvent fixer une largeur en pourcentage sur chaque élément pour obtenir un alignement propre. Ici, on définit une fois pour toutes quatre colonnes égales et un espacement constant, et chaque image vient se ranger naturellement dans sa cellule, avec une cohérence visuelle immédiate.
Pour une galerie plus créative, où certaines photos doivent occuper deux cellules pour créer un effet de mise en avant, les réglages avancés de position permettent d’indiquer qu’un élément précis s’étend sur plusieurs colonnes ou plusieurs lignes, un exercice nettement plus laborieux à obtenir proprement avec du Flexbox seul.
Cas d’usage concret : le tableau de tarifs
Autre exemple très courant en site vitrine : un tableau comparatif de trois ou quatre offres tarifaires, où chaque colonne doit être parfaitement alignée avec les autres, ligne par ligne (le titre de l’offre au même niveau, le prix au même niveau, la liste des fonctionnalités au même niveau, le bouton d’appel à l’action tout en bas). C’est exactement le genre de structure où CSS Grid excelle : on définit une grille avec autant de colonnes que d’offres, et chaque bloc de contenu vient s’aligner naturellement sur la bonne ligne, sans jeu de hauteurs minimales approximatif comme on pouvait le pratiquer avec les anciennes colonnes.
Le résultat est plus robuste face au contenu variable : si une offre a une liste de fonctionnalités plus longue que les autres, la structure en grille garde son alignement général sans qu’il soit nécessaire de forcer des hauteurs fixes qui cassent le rendu sur mobile.
Pour aller plus loin
Le Grid Container ne remplace pas le Container Flexbox, il le complète. Dans un même projet, il est tout à fait courant de combiner les deux : un Grid Container pour la structure générale d’une section en quadrillage, avec à l’intérieur de chaque cellule un Container Flexbox pour aligner le contenu de cette cellule (image en haut, texte au milieu, bouton en bas, alignés verticalement). C’est cette complémentarité qui fait la richesse de l’approche actuelle d’Elementor sur la mise en page.
Mon conseil pour vous approprier l’outil : reprenez un tableau de tarifs ou une galerie que vous avez déjà construits en Flexbox ou en sections classiques, et refaites l’exercice en Grid Container. C’est en comparant les deux résultats sur un cas concret que la logique de CSS Grid devient réellement intuitive.
