CSS Grid

Grid organise une interface en lignes et colonnes.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Utiliser Grid pour les layouts 2D et Flexbox pour l'alignement interne.

Exemples classiques :

• grille de cartes produits
• galerie images
• dashboard en colonnes

Grid et Flexbox sont complémentaires, pas concurrents.

A retenir

Utilise Grid pour la structure 2D globale, et Flexbox pour l'alignement interne de chaque bloc.

Erreurs frequentes :

• vouloir tout faire en Grid, y compris les petits alignements internes
• multiplier les colonnes fixes sans penser au responsive

Mini pratique

Construit une grille 3 colonnes, puis passe a 2 colonnes et 1 colonne avec des media queries.

Ajoute ensuite un gap plus grand sur desktop pour vérifier que la lisibilité dépend aussi des espacements.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.