Les bases de grid

grid-template-columns: repeat(3, 1fr) crée trois colonnes égales en une ligne, et le navigateur place chaque enfant dans la cellule libre suivante.

Lignes et colonnes à la fois

Grid, le module CSS Grid Layout, est conçu pour la mise en page en deux dimensions : lignes et colonnes ensemble. Tu dessines la grille sur le conteneur et les éléments viennent se placer dans ses cellules. Là où flexbox part des éléments et les laisse trouver leur taille, grid part de la mise en page et y fait entrer les éléments. C'est donc l'outil naturel pour les galeries de photos, les listes de cartes et la structure générale d'une page avec un en-tête, une barre latérale, le contenu principal et un pied de page.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 10px;
}
.gallery .wide { grid-column: span 2; }    /* this item covers two columns */

Les pistes et l'unité fr

grid-template-columns donne la largeur de chaque colonne, appelée piste. Tu peux utiliser n'importe quelle longueur, comme 200px 1fr, mais grid ajoute sa propre unité : fr, une fraction de l'espace libre. 1fr 1fr 1fr crée trois colonnes égales ; 2fr 1fr rend la première colonne deux fois plus large que la seconde. L'unité fr ne partage que l'espace restant après les pistes fixes et les gaps : 200px 1fr donne donc une barre latérale de 200 pixels et laisse la colonne principale prendre le reste. repeat(3, 1fr) est une façon plus courte d'écrire 1fr 1fr 1fr. grid-template-rows fait de même pour les lignes, mais souvent on ne touche pas aux lignes et on les laisse aussi hautes que leur contenu.

Placer les éléments

Par défaut, les éléments remplissent la grille dans l'ordre du code, une cellule chacun, de gauche à droite puis sur la rangée suivante. Pour agrandir un élément, grid-column: span 2 lui fait couvrir deux colonnes, et grid-row: span 2 deux rangées. Les lignes entre les pistes sont numérotées à partir de 1 : une grille à trois colonnes a les lignes 1 à 4, et grid-column: 1 / 3 signifie de la ligne 1 à la ligne 3. grid-column: 1 / -1 étire un élément sur toute la largeur, car les nombres négatifs comptent à partir de la fin.

Nommer des zones

Pour la mise en page d'une page, grid-template-areas permet de dessiner la disposition avec des mots. Chaque chaîne entre guillemets est une rangée et chaque mot une cellule ; répéter un mot fait couvrir ces cellules par une zone. Ensuite, chaque élément reçoit grid-area avec le nom correspondant. La mise en page ci-dessous se lit presque comme un croquis : l'en-tête en haut sur toute la largeur, une barre latérale et le contenu principal côte à côte, et le pied de page en bas. Pour adapter la mise en page à un téléphone, il suffit de réécrire ces quelques chaînes, souvent dans une media query.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 16px;
}
header { grid-area: head; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

Des colonnes qui s'adaptent à l'écran

Un motif des guides grid de MDN mérite d'être retenu : grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)). minmax(150px, 1fr) indique que chaque colonne doit faire au moins 150 pixels et peut grandir pour partager l'espace, et auto-fill crée autant de colonnes qu'il en tient. On obtient une galerie qui affiche deux colonnes sur un téléphone et cinq ou six sur un grand écran, là encore sans media query. Comme avec flexbox, grid peut placer les éléments dans un ordre différent de celui du HTML, et la même prudence s'impose : garde le même ordre de lecture et le même ordre visuel.