Quand une interface doit aligner des éléments à la fois en lignes et en colonnes, comme une grille de produits, un tableau de bord ou le squelette général d'une page avec en-tête, menu latéral et contenu, CSS Grid est l'outil natif prévu pour ça. Avant son arrivée, ce genre d'alignement à deux dimensions se bricolait avec des flottants ou des colonnes calculées à la main, avec des résultats fragiles au moindre changement de contenu.
Grid s'active avec une seule déclaration sur un conteneur. À partir de là, tous les enfants directs de ce conteneur deviennent des éléments de grille, positionnables sur des lignes et des colonnes que le parent définit. Les termes suivants du glossaire détaillent chacun un aspect de cet outil, des grid-template-columns qui dessinent les colonnes jusqu'à la comparaison avec Flexbox.
Définition
CSS Grid, ou Grid Layout, est un système de mise en page à deux dimensions : il gère en même temps l'alignement horizontal et l'alignement vertical des éléments, dans une seule grille. C'est la différence majeure avec Flexbox, qui aligne les éléments sur un seul axe à la fois, en ligne ou en colonne. On active Grid avec la propriété display, en lui donnant la valeur grid ou inline-grid, sur un élément parent appelé le conteneur de grille. Ses enfants directs deviennent alors des éléments de grille, sans qu'il soit nécessaire de leur ajouter la moindre propriété pour qu'ils se rangent déjà dans les cases générées.
Une syntaxe minimale
.grille {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Trois propriétés suffisent pour une grille fonctionnelle. display: grid déclare le conteneur. grid-template-columns fixe le nombre et la largeur des colonnes, ici trois colonnes de largeur égale. Et gap pose l'espace entre les cases sans avoir à ajouter des marges sur chaque enfant, ni à corriger la marge du dernier élément qui déborderait sinon du conteneur. Le nombre de lignes, lui, se déduit automatiquement du nombre d'enfants si on ne le précise pas explicitement avec grid-template-rows.
Un exemple de mise en page complète
.page {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 64px 1fr;
min-height: 100vh;
}
.entete {
grid-column: 1 / -1;
}Ce squelette de page pose deux colonnes, une barre latérale fixe de 240 pixels et un contenu qui prend le reste de la largeur, ainsi que deux lignes, un en-tête de 64 pixels et un contenu qui prend le reste de la hauteur. L'en-tête, lui, occupe les deux colonnes grâce à grid-column: 1 / -1, une syntaxe expliquée en détail dans le terme dédié au placement des éléments. C'est ce genre de structure, avec des zones de tailles différentes qui s'agencent proprement, que Grid gère naturellement et qu'un système en une dimension aurait forcé à empiler artificiellement. Notre formation HTML et CSS construit exactement ce type de squelette de page, colonnes et lignes comprises, jusqu'à ce que la syntaxe devienne un réflexe plutôt qu'un calcul à refaire à chaque projet.
Grid n'est pas un remplaçant universel de Flexbox
La confusion la plus fréquente chez qui découvre Grid est de vouloir l'utiliser partout, y compris pour des cas où Flexbox suffit largement et demande moins de propriétés, comme aligner une rangée de boutons ou centrer un logo à côté d'un menu.
Grid et le contenu qui déborde
Une grille n'a pas besoin de couvrir toute la page ni même tout son conteneur. Un élément qui ne rentre pas dans le nombre de colonnes ou de lignes prévu ne casse pas la mise en page : Grid crée automatiquement des lignes implicites supplémentaires pour l'accueillir, avec une hauteur par défaut qui s'ajuste au contenu. Ce comportement peut surprendre la première fois, notamment quand on attend une erreur ou un débordement visuel, alors que la grille absorbe simplement l'élément en trop dans une nouvelle ligne.
Questions fréquentes
Non. Dès que le parent porte display: grid, tous ses enfants directs deviennent automatiquement des éléments de grille et se répartissent dans les cases disponibles, dans l'ordre du HTML. Vous n'ajoutez des propriétés sur les enfants que si vous voulez contrôler précisément leur position ou leur étendue dans la grille.
Pour l'apparence visuelle, oui : Grid reproduit une structure en lignes et colonnes sans les contraintes d'un tableau HTML. Mais une balise table reste le bon choix quand les données sont réellement tabulaires, par exemple un export chiffré, car elle porte un sens que Grid, purement visuel, n'apporte pas aux technologies d'assistance.
Oui, un élément de grille peut lui-même devenir un conteneur de grille avec sa propre déclaration display: grid. Il crée alors une grille totalement indépendante de celle de son parent, avec ses propres colonnes et lignes. Si vous voulez au contraire qu'il utilise les pistes déjà définies par la grille parente, c'est le rôle de subgrid, traité dans un terme séparé du glossaire.