CSS Grid Generator

Generatore CSS Grid

Generatore CSS Grid gratuito: anteprima live, CSS e Tailwind simultanei, editor di grid-template-areas e demo auto-fill vs auto-fit. Senza registrazione.

Aggiornato giugno 2026

Preset Rapidi
Configurazione del Layout
Modalità
3
2
16px
Dimensioni track personalizzate
justify-items stretch
align-items stretch
Canvas Interattivo
6/12
Codice 
<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
Elemento

Clicca su un elemento nel canvas per modificarne gli span di colonna e riga.

Laboratorio Auto-fill vs Auto-fit

auto-fill crea il maggior numero possibile di track e mantiene quelli vuoti — auto-fit comprime i track vuoti e gli elementi si espandono per riempire la riga. Trascina lo slider per vedere la differenza.

3
160px
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
1
2
3

Generatore CSS Grid — Builder Visuale con Output Tailwind e CSS

Costruisci qualsiasi layout CSS Grid visivamente — regola colonne, righe, gap e span degli elementi e guarda la griglia aggiornarsi in tempo reale. Questo generatore css grid esporta il layout come CSS puro e classi Tailwind contemporaneamente, una cosa che nessun altro grid generator offre. Parti da un preset (Holy Grail, Dashboard, Card Grid) o da zero.

Oltre alle basi, hai un editor visuale di grid-template-areas per layout con nome, breakpoint responsive con media query mobile-first e un laboratorio interattivo auto-fill vs auto-fit — la parte più confusa di CSS Grid, finalmente spiegata in pratica.

Come Usare il Generatore CSS Grid

Da una griglia vuota al codice pronto per la produzione in meno di un minuto:

  1. Scegli un preset o definisci i track — clicca su Holy Grail, Dashboard, Card Grid, Magazine, Mosaic, App Shell o 12-Column, oppure trascina gli slider di Colonne e Righe. Il canvas interattivo si aggiorna all'istante.
  2. Modella gli elementi — in modalità Span, clicca un elemento nel canvas e regola col-span, row-span e posizione iniziale. In modalità Aree con Nome, digita i nomi (header, sidebar, main) direttamente nella matrice dell'editor e il layout si riorganizza dal vivo.
  3. Rifinisci i track — digita dimensioni personalizzate come 200px 1fr minmax(150px, 1fr) per mescolare colonne fisse e flessibili; canvas e codice riflettono ogni modifica.
  4. Copia il codice — passa tra le tab Tailwind, CSS, HTML e Responsive e premi Copia (o Shift+Invio). La tab Responsive genera automaticamente media query mobile-first.

Esempi del Generatore CSS Grid

Alcune configurazioni reali e il codice esatto prodotto dal generatore:

Esempio — griglia di card a 3 colonne:

Config:   3 colonne, 2 righe, gap 16px
CSS:      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
Tailwind: grid grid-cols-3 grid-rows-2 gap-4

Esempio — layout Holy Grail (aree con nome):

Config: colonne 200px 1fr 200px, aree "header header header" / "sidebar main aside" / "footer footer footer"
CSS:    grid-template-areas: "header header header" "sidebar main aside" "footer footer footer";
        .header { grid-area: header; } …

Esempio — elemento che occupa 2 colonne:

Config:   elemento 1 con col-span 2
CSS:      .item-1 { grid-column: span 2; }
Tailwind: <div class="col-span-2">1</div>

Esempio — track personalizzati con minmax (caso particolare):

Config:   grid-template-columns: 200px 1fr minmax(150px, 1fr)
Tailwind: grid-cols-[200px_1fr_minmax(150px,1fr)]   ← valore arbitrario, generato automaticamente

Esempio — cella vuota nelle aree con nome (caso particolare):

Config: lascia una cella vuota nell'editor delle aree
Output: grid-template-areas: "header header" ". main"   ← il punto è una cella vuota valida

CSS Grid — Cos'è e Perché Conta

CSS Grid Layout è un sistema di layout bidimensionale che controlla colonne e righe simultaneamente. A differenza di Flexbox, che è unidimensionale (una riga O una colonna), Grid posiziona gli elementi su entrambi gli assi contemporaneamente — ideale per layout di pagina, dashboard, griglie di card e qualsiasi UI in cui gli elementi devono allinearsi in orizzontale e in verticale.

L'unità fr è il superpotere di Grid: rappresenta una frazione dello spazio rimanente dopo il posizionamento dei track fissi. grid-template-columns: 200px 1fr 1fr in un contenitore di 800px produce una sidebar di 200px e due colonne di 300px — senza calcoli di percentuali. Combinata con minmax() e repeat(auto-fill, …), permette griglie completamente responsive senza scrivere una sola media query.

Casi d'Uso Comuni

  • Layout di pagina (Holy Grail): header, footer e tre colonne al centro in sei righe di CSS — un layout che prima richiedeva hack con float. Il preset Holy Grail lo genera all'istante.
  • Dashboard: sidebar fissa più area di contenuto flessibile con zone per stats e widget. Le aree con nome mantengono il CSS leggibile man mano che la dashboard cresce.
  • Gallerie di prodotti/card: repeat(auto-fill, minmax(250px, 1fr)) crea una galleria che passa da 4 colonne a 1 quando il viewport si restringe — zero breakpoint.
  • Progetti Tailwind: la tab Tailwind produce grid-cols-*, col-span-* e valori arbitrari come grid-cols-[200px_1fr], pronti da incollare in componenti React, Vue o Svelte.
  • Layout editoriali/rivista: combina un hero a larghezza piena con colonne di articoli asimmetriche usando il preset Magazine, poi regola gli span blocco per blocco.

Errori Comuni con CSS Grid

  • Usare auto-fit quando serviva auto-fill: con pochi elementi, auto-fit li allunga su tutta la riga — una singola card può occupare l'intero contenitore. Usa il laboratorio sotto il canvas per confrontarli prima di decidere.
  • Aree con nome non rettangolari: grid-template-areas richiede che ogni area formi un rettangolo. Un'area a "L" invalida silenziosamente l'intero template e il browser ricade sul posizionamento automatico.
  • Confondere fr con %: 1fr è una frazione dello spazio che resta, mentre 33% è una frazione del contenitore totale — le percentuali combinate con gap causano overflow; fr sottrae i gap automaticamente.
  • Span maggiori del numero di track: un elemento con col-span-4 in una griglia a 3 colonne forza una quarta colonna implicita. Il generatore limita gli span al numero di colonne nell'anteprima per renderlo visibile.

Domande Frequenti

Qual è la differenza tra auto-fill e auto-fit in CSS Grid?

Entrambi creano tanti track quanti ne entrano nel contenitore con repeat(). La differenza emerge quando gli elementi non riempiono la riga: auto-fill mantiene i track vuoti, conservando dimensioni coerenti, mentre auto-fit comprime i track vuoti a zero e gli elementi esistenti si allungano per riempire lo spazio. Usa auto-fit per gallerie che devono sempre occupare tutta la larghezza; auto-fill quando la coerenza delle dimensioni conta di più.

Cos'è l'unità fr in CSS Grid?

L'unità fr (fraction) rappresenta una frazione dello spazio disponibile dopo il posizionamento dei track a dimensione fissa. Per esempio, grid-template-columns: 200px 1fr 1fr in un contenitore di 800px dà 200px, 300px e 300px. A differenza delle percentuali, fr opera sullo spazio rimanente e tiene conto dei gap — più affidabile quando si mescolano track fissi e flessibili.

Come creo una griglia responsive senza media query?

Usa grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). Questo crea tante colonne da almeno 250px quante ne entrano nel contenitore e regola automaticamente il numero quando il viewport cambia — 4 colonne su desktop, 2 su tablet, 1 su mobile, senza alcuna media query. Il laboratorio auto-fill vs auto-fit di questo generatore ti permette di testare il pattern dal vivo.

Come funziona grid-template-areas?

Definisce il layout come una mappa testuale visiva: ogni stringa tra virgolette è una riga, ogni parola è un'area con nome e il punto (.) indica una cella vuota. Gli elementi si assegnano con grid-area: nome. Il vincolo: ogni area deve essere rettangolare — ripeti il nome su più celle perché un'area copra più colonne o righe. La modalità Aree con Nome di questo generatore costruisce il template mentre digiti i nomi nelle celle.

Posso esportare la griglia come classi Tailwind?

Sì — la tab Tailwind converte la configurazione in classi utility in tempo reale: grid-cols-3, gap-4, col-span-2 e così via. I track personalizzati diventano valori arbitrari come grid-cols-[200px_1fr_200px], e le aree con nome usano la sintassi arbitrary property di Tailwind ([grid-area:header]) — anche i layout complessi funzionano senza toccare la configurazione di Tailwind.

Risorse

Strumenti correlati