CSS Grid & Flexbox — Layouts modernes

Flexbox : layouts 1D

Flexbox est l'outil idéal pour aligner des éléments sur une seule dimension (ligne ou colonne). Indispensable pour : navbars, formulaires, cartes alignées.

.container { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

CSS Grid : layouts 2D

Grid est l'outil pour des layouts complexes en 2 dimensions (lignes + colonnes). Parfait pour : pages entières, galeries, dashboards.

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

• Flexbox : 1D, parfait pour navbars et cards alignées
• Grid : 2D, parfait pour layouts entiers
• Combine les deux : Grid pour la page, Flex pour les éléments