🧩 Le cours : la mise en page à deux dimensions
Grid est le système de mise en page à deux dimensions de CSS : on dessine une grille de lignes et de colonnes, puis on place les éléments dedans. Là où Flexbox aligne sur un seul axe, Grid contrôle à la fois la largeur des colonnes et la hauteur des lignes.
Colonnes, lignes et l'unité fr
L'unité fr (*fraction*) représente une part de l'espace disponible. Dans 1fr 2fr 1fr, la deuxième colonne est deux fois plus large que les autres, et l'ensemble remplit exactement le conteneur. On peut mélanger les unités : 200px 1fr (une colonne fixe, une colonne souple) ou auto 1fr (la première colonne prend la taille de son contenu).
grid-template-columns: 1fr 2fr 1fr
┌────────┬──────────────────┬────────┐
│ 1 │ 2 │ 3 │
├────────┼──────────────────┼────────┤
│ 4 │ 5 │ 6 │
└────────┴──────────────────┴────────┘
25 % 50 % 25 %
Les éléments sont placés automatiquement, de gauche à droite puis de haut en bas : il suffit de définir les colonnes, les lignes se créent toutes seules selon le nombre d'éléments (on peut régler leur hauteur avec grid-auto-rows).
repeat() et minmax()
repeat(3, 1fr) évite de recopier 1fr trois fois. minmax(min, max) fixe une plage de largeur pour une colonne : minmax(14rem, 1fr) signifie « au moins 14rem, au plus une part de l'espace libre ».
Une grille qui s'adapte seule : auto-fit
En combinant repeat(auto-fit, minmax(…)), Grid crée autant de colonnes que la largeur le permet : sur un grand écran 4 colonnes, sur un téléphone une seule, sans aucune media query. C'est l'une des constructions les plus utiles de CSS.
.cartes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
RenduQuatre cartes côte à côte sur un grand écran, deux par ligne sur une tablette, une seule en colonne sur un téléphone.
Placer un élément précisément
Les lignes de la grille sont numérotées à partir de 1 : une grille de 3 colonnes a 4 lignes verticales (1 à 4). Un élément peut occuper plusieurs cases : grid-column: 1 / 3 (de la ligne 1 à la ligne 3, donc 2 colonnes), grid-column: span 2 (2 colonnes à partir de sa position), grid-row: span 2. -1 désigne la dernière ligne : grid-column: 1 / -1 couvre toute la largeur.
.grille {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.titre {
grid-column: 1 / -1; /* toute la largeur */
}
.vedette {
grid-column: span 2; /* 2 colonnes... */
grid-row: span 2; /* ...et 2 lignes */
}
Nommer les zones d'une page
grid-template-areas dessine la page avec des noms : chaque chaîne est une ligne, chaque mot une colonne, et un nom répété fusionne les cases. Les enfants rejoignent leur zone avec grid-area. La mise en page se lit directement dans le CSS (voir la deuxième carte), et on la réorganise en changeant simplement le dessin.
Aligner dans la grille
| Propriété | Rôle |
|---|
justify-items, align-items | alignement de chaque élément dans sa case (horizontal, vertical) |
place-items: center | raccourci des deux : centre tout |
justify-self, align-self, place-self | alignement d'un seul élément dans sa case |
justify-content, align-content | positionnement de toute la grille dans le conteneur quand elle est plus petite |
Adapter une grille aux écrans
On part d'une seule colonne (mobile), puis on ajoute des colonnes aux écrans plus larges avec une media query (voir Responsive).
.page {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.page {
grid-template-columns: 220px 1fr;
}
}
Grid et Flexbox ensemble
Les deux ne s'opposent pas : on utilise Grid pour le squelette de la page ou d'un composant (zones, colonnes), et Flexbox pour aligner le contenu d'une zone (barre de boutons, ligne d'étiquettes).
