CSS Grid

Grid layout (mise en page en grille 2D)

display: grid transforme tous les enfants directs en cellules d’une grille bidimensionnelle.

.container {
  display: grid;
}

---

Grid Template Columns & Rows

Définir les pistes de colonnes et de lignes, souvent avec des fonctions comme repeat() ou minmax().

---

Auto-placement & Gap

grid-auto-flow, grid-auto-columns/rows, et gap gèrent le placement automatique des items et l’espacement.

---

Placement explicite : grid-column / grid-row / grid-area

Position exacte des éléments dans la grille via angles linéaires ou noms d’aires.

---

Alignement & Align-Self

Les règles d’alignement dans Grid proviennent du module flex, maintenant partagé (box‑alignment).

---

Mise en page responsive avec Grid

Exemples avancés : layout fluide en 1 à 3 colonnes, système 12‑colonnes, auto-placement produit.

---

Résumé rapide

Table : Résumé rapide

Concept	Description succincte
display: grid	Active la grille bidimensionnelle pour les enfants directs
grid-template	Définit explicitement colonnes, lignes, ou zones avec repeat()/minmax
auto-placement	Place les items automatiquement selon grid-auto-flow et gap
Placement explicite	grid-column, grid-row, grid-area : contrôle précis de la grille
Alignement	Align-items, justify-items, align-self partagés avec le modèle Flexbox
Layout responsive/grid	Grilles adaptatives, systèmes multi-colonnes, zones nommées