CSS Grid layout

Grid layout est le module CSS dédié à la mise en page. Il est apparu après des années de bricolage ou furent utilisées des techniques parfois approximatives souvent complexes et contre-intuitives (tables, floats, inline-blocks).

Il diffère de Flexbox principalement par le fait qu’il est dédié à des layouts bi-dimensionnels (lignes et colonnes), là où flexbox est dédié aux layouts uni-dimensionnels (lignes ou colonnes).

Au delà de ceux qui sont présents dans cette page, voir quelques exemples.

Démarrer

On crée un “contexte de grille” en appliquant la déclaration display: grid à un élément HTML. 

.container { display: grid; }

Cette déclaration va permettre de définir un ensemble de pistes, formées de lignes et de colonnes, définissant des “cellules”.

.container { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; /* définit explicitement une grille de trois colonnes */
  grid-template-rows: repeat(3, 1fr); /* définit explicitement  une grille de trois lignes, avec "repeat()" */
}

Cet ensemble “virtuel” de lignes et de colonnes va permettre aux enfants de ce conteneur de devenir des grid-items qui seront positionnées au sein des cellules de la grille.

On peut souhaiter déterminer une goutière (un espace entre les lignes et colonnes) :

.container { 
  display: grid; 
  gap: 1em; /* espace uniforme ou bien: */
  gap: 1em 2em; /* espace de 2em entre les colonnes, 1em entre les lignes */
}

⚠ Lorsque des images sont insérées dans une grille, il est souvent (toujours…) nécessaire de les dimensionner pour qu’elles ne dépassent pas de la largeur de la cellule (voir les règles à systématiser) :

.container img { 
  max-width: 100%; /* pour ne pas les agrandir mais uniquement les rétrécir */
  width: 100%; /* pour forcer leur redimensionnement */
}

Flexibilité

CSS Grid introduit des unités plus complexes que les habituels px, %, em, qui permettent notamment de s'adapter à la taille des contenus et d’aporter beaucoup de flexibilité à la mise en page.

Unité Détails
fr fraction(s) de l'espace restant
min-content se rapporte à la largeur (ou hauteur) de l'élément le plus petit
max-content se rapporte à la largeur (ou hauteur) de l'élément le plus grand
minmax(min, max) exemple minmax(min-content, 20%) correspond à largeur 20% (ou hauteur), mais au minimum largeur (ou hauteur) du contenu
auto s'adapte à la largeur (ou hauteur) du contenu

Implicite vs explicite

Il est souvent souhaitable de laisser le navigateur déterminer le nombre de lignes (voire même de colonnes) nécessaires pour afficher les enfants d’une grille dans ses cellules.

Plutôt que la déclaration ci-dessus, on préférera parfois utiliser celle-ci :

.container { 
  display: grid; 
  gap:.5em;
  /* autant de colonnes que possible (auto-fill), dont la largeur est au minimum 300px */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
  /* on ne définit pas de lignes, le navigateur en créera autant que nécessaire */
}

1

2

3

4

5

6

Positionnement des éléments

Les éléments d’une grille peuvent être explicitement affectés à une cellule.

<body>
  <header>header</header>
  <nav>nav</nav>
  <article>article</article>
  <aside>aside</aside>
</body>
body {
    display: grid; /* crée une grille */
    grid-template-columns: 150px 1fr; /* crée deux colonnes */
    grid-template-rows: 100px 200px; /* crée deux lignes */
}
header {
    grid-row: 1; grid-column: 1; /* ligne 1, colonne 1 */
}
nav {
    grid-row: 1; grid-column: 2; /* ligne 1, colonne 2 */
}
article {
    grid-row: 2; grid-column: 2; /* ligne 2, colonne 2 */
}
aside {
    grid-row: 2; grid-column: 1; /* ligne 2, colonne 1 */
}
header
article

Mais on peut également (c’est souvent préférable) laisser le navigateur « faire au mieux » en donnant aux éléments le moins possible de règles :

En spécifiant uniquement le nombre de colonnes ou de lignes qu’un élément doit occuper :

.item-2 { grid-column-end: span 3; }
.item-11 { grid-column: 3 / span 3; }
.item-14 { grid-row-end: span 2; }
grid-column-end: span 3
grid-column: 3 / span 3
grid-row-end: span 2;

En spécifiant uniquement la colonne ou la ligne à laquelle un élément doit débuter :

.item-2 { grid-column: 3; }
.item-13 { grid-row: 2; }
grid-column: 3
grid-row: 2;

↑ Ici, la deuxième cellule est laissée vide, l’élément sensé l’occuper étant positionné explicitement en 3e colonne. Le 13e élément, positionné explicitement sur la 2e ligne, occupe sa première place.

↓ On peut “densifier” une grille, en forçant ses enfants à occuper le plus de cellules disponibles :

.grille {
  /* … */
  grid-auto-flow: dense;
}
grid-column: 3
👋
grid-row: 2;

Zones nommées

En complément de grid-template-columns et de grid-template-rows, on peut nommer les emplacements à l’aide de chaines de caractères ou de lettres, grâce à la propriété grid-template-areas.

section {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-template-rows: 60px 300px 100px;
    grid-template-areas: "entete entete"
                         "navigation contenu"
                         "pied pied";
}
header { grid-area: entete; /* placement de <header> dans l'emplacement "entete" */ }
nav { grid-area: navigation; /* placement de <nav> dans l'emplacement “navigation” */ }
article { grid-area: contenu; /* placement de <article> dans l'emplacement "contenu" */ }
footer { grid-area: pied; /* placement de <footer> dans l'emplacement "pied" */ }

/* une media-query permet ici de positionner différemment les éléments */
@media (max-width:40em) {
  section {
    grid-template-columns: min-content 1fr;
    grid-template-areas: "entete navigation" 
                         "contenu contenu" 
                         "pied pied";
  }
}
header
article
footer

Ressources en ligne

Le plus éclairant des tutoriels et guides sur CSS Grid est sans doute celui de Josh W. Comeau : An Interactive Guide to CSS Grid.

De très nombreuses ressources sont disponibles en ligne : Gridbyexample.com, les grilles, par l’exemple… ; Visual cheat sheet, toutes les propriétés, illustrées ; CSS Grid Cheat Sheet, your ultimate CSS grid visual guide ; ☞ Layoutland, les vidéos éclairantes de Jen Simmons ; Grid experiments sur Codepen…

Quelques autres liens :

Tutoriaux complets

Examples

Vocabulaire

Quelques précisions de vocabulaire sur les notions essentielles nécessaires à la compréhension de Grid layout.