Layout: Flexbox e Grid

I due strumenti moderni per disporre elementi: Flexbox per linee, Grid per griglie 2D.

Foundation 35 minuti Prerequisiti: Fondamenti di CSS

Flexbox vs Grid

Flexbox: una dimensione (riga o colonna). Ottimo per nav bar, gruppi di pulsanti, allineamenti.
Grid: due dimensioni (righe + colonne). Ottimo per layout di pagina, dashboard, gallerie.

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

Usa Grid quando devi controllare la posizione su DUE assi, Flexbox quando ne basta UNO.