Centrage grid
Centre les éléments de la galerie avec place-items.
Objectifs de la leçon
- Comprendre l'espace d'une cellule
- Centrer les éléments avec place-items
- Éviter le positionnement absolu pour un centrage simple
Comprendre le principe
À la fin de cette leçon, tu sauras comprendre l'espace d'une cellule.
À la fin de cette leçon, tu sauras centrer les éléments avec place-items.
À la fin de cette leçon, tu sauras éviter le positionnement absolu pour un centrage simple.
Centrage par la grille
Les éléments sont centrés dans des cellules disposant d'une hauteur visible.
La grille conserve les éléments dans le flux.
place-items combine deux axes.
Pourquoi éviter : Coordonnées manuelles
Cette technique retire l'élément du flux alors que Grid sait déjà le centrer.
Grid permet d'aligner sans calculer manuellement des coordonnées.
Vocabulaire lié
- align-items — Aligne sur l'axe de bloc.
- justify-items — Aligne sur l'axe en ligne.
- place-items — Raccourci combinant align-items et justify-items.
Validation
- Je peux expliquer : Grid permet d'aligner sans calculer manuellement des coordonnées.
- Je peux comprendre l'espace d'une cellule.
- Je peux centrer les éléments avec place-items.