Generatore CSS Grid

Strumento gratuito per provare i layout CSS Grid regolando dall'interfaccia grid-template-columns e rows, justify-items, align-items e gap, con anteprima in tempo reale. Il codice CSS generato si copia con un clic.

Ultimo aggiornamento: 2026-09-20

Costruire a mano una disposizione CSS Grid

CSS Grid è il metodo di disposizione bidimensionale, che governa righe e colonne insieme. Questo strumento vi lascia commutare grid-template-columns e rows, justify-items, align-items e gap sullo schermo, accertare l'esito via via e ricopiare il CSS ottenuto.

Scegliere fra questo e Flexbox riesce facile se si ragiona in termini di uno o due assi. Per disporre elementi su una sola riga Flexbox basta; per una disposizione in cui righe e colonne debbano allinearsi insieme, Grid si presta meglio. La forza propria di Grid è l'unità fr, che esprime una quota dello spazio rimanente: scrivete 1fr 2fr e la larghezza che avanza si divide uno a due. L'altra cosa che merita di essere tenuta a mente è la forma repeat(auto-fit, minmax(200px, 1fr)). Essa sola dà una disposizione il cui numero di colonne cresce e cala con la larghezza, senza una sola interrogazione di media.

Come si usa

Partite da una preimpostazione Le disposizioni consuete — tre colonne, intestazione con barra laterale — sono a portata di mano.
Mutate le definizioni di colonne e righe Usare fr consente di spartire per proporzione lo spazio rimanente.
Provate le proprietà di allineamento justify-items e align-items stabiliscono come il contenuto si collochi entro ciascuna cella.
Copiate il CSS generato Non appena la disposizione vi soddisfa, si incolla tale e quale nel vostro codice.

Consigli per sfruttarlo al meglio

In grid-template-columns: repeat(3, 1fr) l'unità fr esprime «la quota di spazio residuo da spartirsi»: a differenza di un valore fisso in px, mantiene le proporzioni fra le colonne anche al variare della larghezza dello schermo.
La proprietà gap si applica solo agli spazi fra righe e colonne e, a differenza di margin, non influisce sull'esterno della griglia. Si possono anche indicare valori diversi per righe e colonne (row-gap e column-gap).
Le tracce in modalità «auto» si adattano alla dimensione reale del contenuto e sono quindi indicate per righe o colonne con immagini o quantità di testo variabili.
Con le impostazioni per singolo elemento del tipo grid-column: span 2 si realizza facilmente un layout in cui solo l'intestazione o il piè di pagina occupano l'intera larghezza della griglia.
Quando serve una griglia articolata è preferibile Grid; quando basta una disposizione in una sola direzione, come per una barra di navigazione, è più adatto Flexbox (vedete anche il generatore CSS Flexbox).

Quando torna utile

Nel costruire l'ossatura di un'intera pagina

Collocare intestazione, barra laterale, corpo e piè di pagina è per l'appunto ciò in cui Grid eccelle.

Nel disporre schede a griglia

Unire auto-fit a minmax fa variare il numero di colonne con la larghezza dello schermo.

Nell'allineare un modulo

Allineare le colonne di etichette e campi lascia correre dritta la verticale e si legge assai meglio.

Nell'apprendere Grid

Mutare un valore e guardarne l'esito chiarisce come righe e colonne si stabiliscano.

Termini di CSS Grid

Contenitore a griglia: L'elemento genitore cui si dà display: grid. Al suo interno si definiscono righe e colonne.
Fr: L'unità che esprime una quota dello spazio rimanente. Con 1fr 2fr la larghezza che avanza si divide uno a due.
Grid-template-columns: Definisce la successione e le larghezze delle colonne. repeat() risparmia di riscrivere lo stesso valore.
Minmax: La funzione che enuncia un minimo e un massimo. minmax(200px, 1fr) significa «assicura 200 pixel e cresci se c'è posto».
Auto-fit: La parola chiave che crea tante colonne quante ne entrano. Unita a minmax, manda a capo senza alcuna interrogazione di media.
Gap: Lo spazio lasciato fra righe e colonne. I due versi si possono fissare separatamente.

Domande frequenti

CSS Grid è adatto ai layout bidimensionali in cui si controllano insieme righe e colonne, come l'ossatura di una pagina o un cruscotto. Flexbox si scrive invece in modo più semplice quando basta una disposizione in una sola direzione, come una barra di navigazione o schede affiancate. È molto comune combinarli: Grid per l'impianto generale, Flexbox all'interno dei componenti.

fr sta per «fraction» ed è l'unità che distribuisce lo spazio residuo del contenitore secondo la proporzione indicata. Con grid-template-columns: 1fr 2fr, per esempio, la seconda colonna risulta larga il doppio della prima. A differenza di un valore assoluto come px, mantiene la proporzione anche al variare della dimensione dello schermo.

repeat() è la funzione che ripete la stessa traccia più volte: repeat(3, 1fr) equivale a scrivere grid-template-columns: 1fr 1fr 1fr. Quando le colonne sono molte o variabili, permette di descrivere tutto con due soli argomenti, il numero di ripetizioni e la dimensione della traccia.

Il layout «holy grail» (sacro graal) è la classica struttura di pagina composta da intestazione, barra laterale, contenuto principale e piè di pagina, un caposaldo del design web. Prima di CSS Grid richiedeva implementazioni complesse con float o tabelle; oggi, per esempio con grid-template-areas, si riproduce con pochissimo codice.

grid-column: span N colloca l'elemento facendogli occupare N tracce (colonne) in orizzontale. Assegnando per esempio grid-column: span 3 alla sola intestazione, questa si estende su tutte le colonne mentre gli altri elementi restano nelle rispettive celle. Lo stesso vale per grid-row.

A proposito — CSS Grid, la seconda dimensione che Flexbox non copriva

CSS Grid Layout (nome ufficiale: CSS Grid Layout Module) è stato progettato come sistema bidimensionale in grado di definire righe e colonne insieme, a differenza di Flexbox che si concentra sulla disposizione in una sola direzione. La standardizzazione presso il W3C è iniziata verso il 2011 e nel 2017 Chrome, Firefox, Safari ed Edge lo hanno implementato quasi contemporaneamente, facendone esplodere l'adozione.

Prima di Grid, disporre l'intera pagina nella griglia «intestazione, barra laterale, contenuto, piè di pagina» — il cosiddetto layout holy grail — era possibile solo con complessi espedienti basati su float o tabelle. CSS Grid, con proprietà dichiarative come grid-template-columns, grid-template-rows e grid-template-areas, ha ridotto quel classico schema a poche righe di CSS.

Oggi molti progetti costruiti attorno a righe e colonne — interfacce di cruscotti, gallerie di immagini, impaginazioni in stile rivista — sono realizzati con CSS Grid. Anche «subgrid», che permette a una griglia annidata di ereditare le tracce del genitore, è ormai supportato dai browser principali e rende più semplice mantenere la coerenza nei layout complessi.

Nella pratica si è affermata una divisione dei compiti: Grid per l'ossatura della pagina, Flexbox per la disposizione degli elementi dentro i componenti. Non sono tecnologie in concorrenza ma strumenti complementari, forti rispettivamente nell'allineamento monodimensionale e nella griglia bidimensionale, e usarli insieme nella stessa pagina è anzi lo schema progettuale abituale.

Vedi tutte le curiosità