Grid Builder
Crée une grille responsive avec display grid, repeat et minmax.
Objectifs de la leçon
- Créer un conteneur grid
- Générer des colonnes avec repeat
- Construire une grille fluide avec minmax
Comprendre le principe
À la fin de cette leçon, tu sauras créer un conteneur grid.
À la fin de cette leçon, tu sauras générer des colonnes avec repeat.
À la fin de cette leçon, tu sauras construire une grille fluide avec minmax.
Colonnes adaptatives
Le nombre de colonnes s'adapte, chaque carte garde une largeur minimale puis partage l'espace.
display: grid crée le contexte.
grid-template-columns décrit les colonnes.
Pourquoi éviter : Colonnes rigides
La grille exige toujours 900 pixels, même lorsque l'écran est plus étroit.
Grid décrit la structure disponible ; les éléments s'y placent ensuite automatiquement.
Vocabulaire lié
- grille — Système de lignes et colonnes.
- piste — Ligne ou colonne d'une grille.
- repeat() — Fonction répétant une définition de piste.
- minmax() — Définit une taille minimale et maximale.
Validation
- Je peux expliquer : Grid décrit la structure disponible ; les éléments s'y placent ensuite automatiquement.
- Je peux créer un conteneur grid.
- Je peux générer des colonnes avec repeat.