Gallery spacing
Ajoute un gap clair et une grille en trois colonnes.
Objectifs de la leçon
- Définir un nombre fixe de colonnes
- Créer des colonnes de même largeur avec fr
- Utiliser gap pour le rythme
Comprendre le principe
À la fin de cette leçon, tu sauras définir un nombre fixe de colonnes.
À la fin de cette leçon, tu sauras créer des colonnes de même largeur avec fr.
À la fin de cette leçon, tu sauras utiliser gap pour le rythme.
Rythme centralisé
Trois colonnes partagent l'espace et toutes les gouttières sont identiques.
Les fractions partagent l'espace disponible.
gap sépare uniquement les pistes.
Pourquoi éviter : Marges par carte
Les bords extérieurs reçoivent aussi des marges et le rythme devient plus difficile à contrôler.
Une grille cohérente sépare clairement la structure du conteneur et le style de ses cartes.
Vocabulaire lié
- grid-template-columns — Décrit la largeur et le nombre des colonnes.
- fr — Fraction de l'espace disponible.
- gap — Gouttière entre lignes et colonnes.
Validation
- Je peux expliquer : Une grille cohérente sépare clairement la structure du conteneur et le style de ses cartes.
- Je peux définir un nombre fixe de colonnes.
- Je peux créer des colonnes de même largeur avec fr.