# Flexbox or Grid: what designers need to know

The difference is not technical: it is the mental model you use to turn Auto Layout into CSS. A map between what you draw and what the browser can do.

> Page: https://ui.eneawork.it/blog/flexbox-grid-per-designer
> Markdown: https://ui.eneawork.it/blog/flexbox-grid-per-designer.md

*2026-10-31*

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

## Auto Layout, tradotto

## 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

Il catalogo EneUI ha 1.556 blocchi (31 ottobre 2026) già composti: guardare come risolvono la griglia è più utile di un’altra guida teorica.

Se non sai scegliere, chiediti: “se un elemento cresce, cosa deve restare allineato?”. Se la risposta è una riga, Grid; se è la posizione in fila, Flexbox.

## FAQ

### 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.