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.

Consigli per l'uso

  • 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).

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.
Tool-kun

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.

Leggi le curiosità collegate

Vedi tutte le curiosità

Chi consulta questo strumento guarda anche

Generatore di gradienti CSS

Strumento gratuito che, indicando due o più punti di colore, genera il codice CSS di linear-gradient e radial-gradient con anteprima in tempo reale. Angolo e posizioni sono liberamente regolabili e il codice si copia con...

Generatore CSS box-shadow (ombre dei riquadri)

Strumento gratuito che genera il box-shadow dei CSS con anteprima, regolando con i cursori scostamento, sfocatura, diffusione, colore e opacità. Il codice prodotto si copia con un clic.

Generatore CSS Flexbox

Strumento gratuito per provare i layout Flexbox regolando dall'interfaccia flex-direction, justify-content, align-items, flex-wrap e gap, con anteprima in tempo reale. Il codice CSS generato si copia con un clic.

Generatore della proprietà CSS position

Strumento gratuito per passare dall'interfaccia fra i cinque valori static, relative, absolute, fixed e sticky, osservare in anteprima l'effetto di top/right/bottom/left e z-index e generare il codice CSS corrispondente.