// css
CSS Grid vs Flexbox: quale usare (e quando usarli entrambi)
Flexbox dispone in una dimensione, Grid in due. La differenza onesta tra CSS Grid e Flexbox, un confronto diretto e perché la maggior parte dei layout reali li usa insieme.
Grid vs Flexbox è la domanda più frequente sul layout in CSS — e la risposta onesta è che non sono rivali. Risolvono problemi diversi: Flexbox dispone il contenuto in una dimensione (una riga oppure una colonna), mentre CSS Grid dispone il contenuto in due dimensioni (righe e colonne insieme). Una volta capito questo, scegliere tra i due non è più un tirare a indovinare.
La risposta in una riga
Se stai allineando elementi lungo un'unica linea — una barra di navigazione, una fila di pulsanti, tag che vanno a capo — ricorri a Flexbox. Se stai organizzando elementi in una vera struttura bidimensionale — il layout di una pagina, una galleria fotografica, una dashboard di card allineate per righe e colonne — ricorri a Grid. La maggior parte delle pagine non banali usa entrambi, ed è il risultato voluto, non un compromesso.
In che cosa differiscono davvero
| Aspetto | Flexbox | CSS Grid |
|---|---|---|
| Dimensioni | Una (riga o colonna) | Due (righe e colonne) |
| Guidato da | Il contenuto (le dimensioni derivano dagli elementi) | Il layout (definisci prima le tracce) |
| Ideale per | Componenti: barre di navigazione, toolbar, liste, distribuire lo spazio su una linea | Layout di pagina e di sezione, gallerie, griglie di card, sovrapposizioni |
| Spaziature | gap supportato | gap supportato (nato qui) |
| Allineamento | Eccellente lungo l'asse principale/trasversale | Eccellente su entrambi gli assi, più posizionamento per linea/area |
| Sovrapposizione | Non proprio | Sì — gli elementi possono condividere le celle |
Quando usare Flexbox
Flexbox dà il meglio quando hai un insieme di elementi e vuoi distribuire lo spazio tra di loro lungo un asse. Una barra di navigazione con il logo a sinistra e i link a destra, il piè di pagina di una card che spinge un pulsante in basso, una fila di tag che va a capo quando finisce lo spazio: sono tutti problemi monodimensionali. Il pattern classico è un'unica dichiarazione:
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}Poiché Flexbox è guidato dal contenuto, gli elementi si dimensionano da soli e tu li regoli con flex-grow, flex-shrink e flex-basis. Questo lo rende ideale per componenti il cui contenuto non controlli del tutto.
Quando usare Grid
Grid dà il meglio quando definisci prima la struttura e poi ci collochi gli elementi. Una pagina con header, sidebar, area principale e footer; una galleria che deve mantenere righe e colonne ordinate; un insieme responsive di card che si ridispone con auto-fill: sono problemi bidimensionali. Dichiari le tracce e gli elementi si posizionano al loro interno:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}Quell'unica regola produce una griglia di card responsive che aggiunge e rimuove colonne da sola, senza alcuna media query — qualcosa che Flexbox non sa fare in modo pulito, perché conosce un solo asse alla volta.
La risposta vera: usali insieme
In una pagina reale usi quasi sempre entrambi, annidati. Grid gestisce il quadro generale — lo scheletro complessivo della pagina o della sezione — e Flexbox gestisce il dettaglio all'interno di ogni regione: allineare gli elementi dentro una card, un header o una toolbar. Ricorrere a Grid non significa abbandonare Flexbox; sono livelli dello stesso sistema.
Un modello mentale semplice: Grid è per il layout, Flexbox è per i componenti. Se stai posizionando le regioni di una pagina, è Grid. Se stai allineando il contenuto di una regione, è Flexbox. Nel dubbio, chiediti se il problema è davvero bidimensionale — se colonne e righe devono allinearsi tra loro, è Grid; se è solo una riga di elementi, è Flexbox.
Supporto dei browser
Entrambi sono pienamente supportati in ogni browser moderno, e lo sono da anni, quindi il supporto non è un fattore decisivo nel 2026. Scegli in base alla forma del problema, non alla compatibilità. Per uno styling dei componenti più approfondito puoi abbinare l'uno o l'altro al nesting nativo di CSS e alle container query, che permettono a un componente di reagire allo spazio che riceve davvero.
In conclusione
Grid vs Flexbox è il modo sbagliato di impostare la questione. Flexbox è monodimensionale e guidato dal contenuto; Grid è bidimensionale e guidato dal layout. Scegli Flexbox per le linee di elementi e i componenti, scegli Grid per i veri layout 2D, e aspettati di annidarli in qualsiasi pagina con una struttura reale. Sapere a quale domanda risponde ciascuno dei due è tutta la competenza che serve.
Domande frequenti
- Devo usare Flexbox o Grid?
- Usa Flexbox per disporre elementi in una sola direzione (una riga o una colonna) e per allineare il contenuto di un componente; usa CSS Grid quando devi controllare righe e colonne contemporaneamente, come la struttura di una pagina o una galleria che mantiene entrambi gli assi allineati.
- Si possono usare CSS Grid e Flexbox insieme?
- Sì, ed è la norma. Grid di solito gestisce la struttura generale della pagina o di una sezione, mentre Flexbox allinea gli elementi all'interno di ogni area (schede, intestazioni, barre degli strumenti). Sono livelli dello stesso sistema di layout, non rivali.
- CSS Grid è migliore di Flexbox?
- Nessuno è migliore; risolvono problemi diversi. Flexbox è monodimensionale e guidato dal contenuto, Grid è bidimensionale e guidato dal layout. Scegli in base al fatto che il tuo layout sia davvero bidimensionale.
- La compatibilità dei browser è un problema nel 2026?
- No. Sia Flexbox sia CSS Grid sono supportati da tutti i browser moderni da anni, quindi la compatibilità non è un fattore decisivo: scegli in base alla natura del problema.