Mise en page : Flexbox et Grid

Les deux outils modernes pour disposer des éléments : Flexbox pour les lignes, Grid pour les grilles 2D.

Foundation 35 minutes Prérequis: Fondamentaux du CSS

Flexbox vs Grid

Flexbox : une dimension (ligne ou colonne). Parfait pour les barres de nav, les groupes de boutons, les alignements.
Grid : deux dimensions (lignes + colonnes). Parfait pour les mises en page, dashboards, galeries.

.nav { display: flex; gap: 12px; align-items: center; }
.layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }

Utilisez Grid quand il faut contrôler DEUX axes, Flexbox quand UN suffit.