Patterns de layout modernes

Flexbox et Grid sont des outils. Un bon développeur CSS sait surtout choisir le bon pattern selon le besoin.

Pattern 1 : Stack vertical

Parfait pour empiler des blocs avec un espacement cohérent.

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

Pattern 2 : Cluster horizontal

Idéal pour tags, boutons, filtres.

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

Pattern 3 : Sidebar + contenu

Structure classique pour dashboard et admin.

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
}

Avec media query, passe en une colonne sur mobile.

Pattern 4 : Carte responsive

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

A retenir

Le layout se pense en patterns réutilisables, pas en bricolage page par page.

Mini pratique

Construis une page avec :

• un header
• une sidebar
• une grille de cartes

Fais ensuite une version mobile en une seule colonne.

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.