Grid vs Flexbox: guida pratica alla scelta

Dopo quattro pillole su Flexbox e Grid separatamente, la domanda pratica: quando uso cosa? Flexbox è pensato per il layout a una dimensione, riga oppure colonna; Grid per il layout a due dimensioni, righe e colonne insieme.

1. «Dal contenuto» contro «dal layout»

MDN esprime la differenza in un modo più profondo del semplice «1D contro 2D»: Flexbox lavora dal contenuto verso l'esterno, lasci che la dimensione del contenuto decida quanto spazio prende ciascun elemento. Grid lavora dal layout verso l'interno: definisci prima la struttura (righe, colonne), poi ci inserisci il contenuto.

Questo si vede chiaramente nel comportamento responsive. Con flex-wrap: wrap, il numero di elementi per riga cambia in base allo spazio: tanti se c'è spazio, uno solo se lo spazio è stretto. Con una griglia a tre colonne, invece, le colonne restano sempre tre: cambia solo quanto sono larghe.

Fonte: MDN Web Docs, «Relationship of grid layout to other layout methods»: Flexbox lavora dal contenuto verso l'esterno, lasciando che la dimensione del contenuto determini lo spazio di ciascun elemento; con flex-wrap il numero di elementi per riga cambia in base allo spazio disponibile, mentre in una griglia il numero di tracce resta fisso.

2. Casi d'uso reali

Flexbox: una barra di navigazione con logo a sinistra e link a destra; un pulsante con icona e testo allineati; centrare un elemento verticalmente e orizzontalmente; una lista di tag che va a capo da sola.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid: l'intera struttura della pagina (header, sidebar, main, footer); una galleria di card allineate su righe e colonne; un modulo con etichette e campi allineati su una griglia precisa.

.pagina {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr auto;
}

3. Combinarli: il pattern più comune in produzione

Nella pratica, i due raramente si escludono: Grid per la struttura generale della pagina, Flexbox per l'allineamento dentro ciascun blocco di quella struttura.

.pagina {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr auto;
  grid-template-areas: "nav header" "nav main" "nav footer";
}

.header {
  display: flex;              /* dentro il blocco header, allineamento 1D */
  justify-content: space-between;
  align-items: center;
}

Non è una scorciatoia: è la conseguenza naturale del fatto che risolvono problemi diversi. Grid organizza lo scheletro; Flexbox sistema il contenuto dentro ogni singola stanza di quello scheletro.

In sintesi

Il criterio pratico più veloce, spesso citato dagli sviluppatori: se stai allineando elementi in una direzione sola, è Flexbox; se stai controllando righe e colonne insieme, è Grid. E se non sei sicuro, probabilmente ti servono entrambi, in punti diversi dello stesso layout.