Sviluppo web
Flexbox o Grid: cosa deve sapere chi progetta
La differenza non è tecnica: è il modello mentale con cui traduci Auto Layout in CSS. Una mappa tra ciò che disegni e ciò che il browser sa fare.
In sintesi
- Flexbox dispone su un asse, Grid su due: questa è la decisione, non il numero di elementi.
- Auto Layout non è né flex né grid: è un modello di vincoli che va tradotto.
- Le misure che rompono un layout sono quasi sempre altezze fisse e gap in percentuale.
Chi progetta non deve scrivere CSS, ma deve sapere quale modello sta chiedendo. Se disegni una griglia di card e chiedi “mettile in fila”, Flexbox può farlo; se chiedi che le righe restino allineate anche quando una card cresce, serve Grid.
Un asse contro due assi
| Bisogno | Modello | Perché |
|---|---|---|
| Fila di bottoni, navbar, chip | Flexbox | Distribuzione lungo un asse |
| Griglia di card con righe allineate | Grid | Due assi simultanei |
| Dashboard con aree nominate | Grid | Aree esplicite |
| Testo con icona accanto | Flexbox | Allineamento verticale semplice |
| Layout che si sovrappone | Grid | Sovrapposizione controllata |
Auto Layout, tradotto
- Direction → `flex-direction` o `grid-auto-flow`.
- Hug contents → `width: fit-content`.
- Fill container → `flex: 1` o `width: 100%`.
- Fixed → `width` in `rem`, non in pixel se il testo scala.
- Gap → `gap`, non margini tra figli.
- Wrap → `flex-wrap` o `repeat(auto-fit, minmax())`.
Le tre rotture più comuni
Altezze fisse
Un’altezza fissa su una card sembra ordinata nel mockup e taglia il testo quando la lingua cambia o l’utente ingrandisce i caratteri. Preferisci `min-height` e lascia crescere il contenuto.
Gap in percentuale
Il gap in percentuale si calcola sulla larghezza del contenitore, non sullo spazio tra gli elementi. Con tre colonne produce un numero che non corrisponde al disegno. Usa `rem`.
Grid con colonne rigide
`grid-template-columns: 1fr 1fr 1fr` su mobile crea tre colonne illeggibili. Usa `repeat(auto-fit, minmax(240px, 1fr))` e definisci il breakpoint solo quando il contenuto lo richiede.
.cards {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.actions {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}Come verificare senza indovinare
- Prova a 320, 768 e 1280 px: sono tre contesti, non tre gusti.
- Aumenta il testo al 200%: il layout deve restare leggibile.
- Aggiungi una stringa lunga in ogni card: nessun taglio.
- Controlla l’ordine di tabulazione: il layout visivo non deve mentire.
Il catalogo EneUI ha 1.556 blocchi (31 ottobre 2026) già composti: guardare come risolvono la griglia è più utile di un’altra guida teorica.
Domande frequenti
Grid può sostituire Flexbox?
In molti casi sì, ma Flexbox è più semplice per una fila di elementi. Usare Grid per tutto aggiunge complessità senza vantaggio.
Auto Layout è Flexbox?
No. È un modello di vincoli. La traduzione in flex o grid dipende da cosa deve succedere quando il contenuto cambia.
Meglio gap o margini?
`gap` per lo spazio tra elementi dello stesso gruppo. I margini restano utili per lo spazio esterno al contenitore.
Come gestisco le card di altezza diversa?
Con Grid e righe allineate, oppure con `align-items: stretch`. Se le card devono avere altezze diverse, Flexbox con `align-items: flex-start`.
Quante colonne massime?
Dipende dalla larghezza del contenuto. Oltre 4 colonne su desktop il testo diventa difficile da leggere: misura, non copiare.