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
Revisionato da Rafael Duarte
<div class="grid grid-cols-3 grid-rows-[repeat(2,auto)] gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>Clicca su un elemento nel canvas per modificarne gli span di colonna e riga.
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.
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));Come usare il generatore CSS Grid
Dalla griglia vuota al codice CSS o Tailwind in meno di un minuto
1. Parti da un preset o dalle colonne
Scegli Holy Grail, Dashboard o un altro dei sette layout pronti, oppure imposta colonne (fino a 12), righe e gap con gli slider.
2. Modifica elementi o aree con nome
In modalità Span clicchi un elemento nel canvas e ne regoli span, col-start e row-start. In modalità Aree scrivi i nomi direttamente nelle celle della matrice.
3. Copia o scarica il codice
Scegli tra le schede Tailwind, CSS, HTML e Responsive, poi copia il risultato o scaricalo come file grid.css.
Cosa puoi costruire con questo CSS grid generator
Editor visuale, codice CSS e classi Tailwind dallo stesso layout
CSS e Tailwind dalla stessa griglia
Ogni modifica aggiorna insieme il CSS puro e le classi Tailwind (grid-cols-3, col-span-2, valori arbitrari come grid-cols-[200px_1fr]).
Editor visuale di grid-template-areas
Scrivi header, sidebar o main nelle celle e l'anteprima si riorganizza subito; una cella vuota diventa il punto . nel template.
Laboratorio auto-fill vs auto-fit
Una demo interattiva con numero di elementi e larghezza minima regolabili mostra quando le due parole chiave si comportano in modo diverso.
Anteprima mobile, tablet e desktop
Il canvas simula le tre larghezze; in modalità Span scegli quante colonne usare su mobile e su tablet, e la scheda Responsive le trasforma in media query mobile-first.
Allineamento con justify-items e align-items
Quattro valori per asse (stretch, start, center, end) applicati con un clic e riportati sia nel CSS sia nel codice Tailwind.
Tracce personalizzate
Inserisci a mano dimensioni come 200px 1fr minmax(150px, 1fr) per colonne e righe al posto delle frazioni uguali.
Esempi di codice CSS Grid generato
Quando ti serve un generatore di griglie CSS
Layout di pagina, componenti e gallerie
Layout Holy Grail
Header, footer e tre colonne centrali con grid-template-areas: il preset genera il template completo e la versione impilata per mobile.
Pannelli di amministrazione
Il preset Dashboard combina una sidebar fissa da 220px con aree per contenuto, statistiche e widget, leggibili anche quando il CSS cresce.
Gallerie di prodotti e card
Con repeat(auto-fill, minmax(…, 1fr)) una griglia di card passa da quattro colonne a una senza scrivere breakpoint: provalo nel laboratorio.
Progetti in Tailwind CSS
Copia le classi pronte per componenti React, Vue o Svelte, comprese le aree con nome tramite proprietà arbitrarie [grid-template-areas:…].
Blog e pagine editoriali
Il preset Rivista unisce un hero a tutta larghezza e colonne asimmetriche 2fr 1fr, adatte ad articolo e barra laterale.
Griglia classica a 12 colonne
Il preset 12 Colonne riproduce la struttura dei framework di design: assegna a ogni blocco lo span che ti serve, da 1 a 12.
Errori comuni con CSS Grid
Aree con nome non rettangolari
Un'area a forma di "L" rende non valida l'intera dichiarazione grid-template-areas: il browser la ignora senza avvisare e torna al posizionamento automatico.
Usare auto-fit quando serviva auto-fill
Con pochi elementi, auto-fit comprime le tracce vuote e allarga quelli presenti: una sola card può finire per occupare tutto il contenitore.
Confondere fr e percentuali
1fr è una frazione dello spazio che resta dopo tracce fisse e gap, mentre % si calcola sul totale: tre colonne al 33% più il gap causano overflow.
Accenti e spazi nei nomi delle aree
I nomi vengono normalizzati in minuscolo e ogni carattere diverso da lettere a–z, cifre, - e _ diventa un trattino: città diventa citt-. Usa nomi senza accenti come citta.
Perché usare questo generatore di griglie CSS
L'editor di grid-template-areas e il laboratorio auto-fill vs auto-fit rendono concrete le due parti di CSS Grid che confondono di più. Vedi il layout cambiare mentre lo costruisci, invece di ricaricare la pagina dopo ogni modifica.
Lo stesso layout esce in CSS puro, classi Tailwind, HTML con stile incluso e media query mobile-first, quindi non devi tradurre a mano da un formato all'altro. Tutto gira nel browser, senza registrazione.
auto-fill o auto-fit?
La differenza si vede solo quando nella riga resta spazio libero
Domande frequenti
Entrambi, dentro repeat(), creano tutte le tracce che stanno nel contenitore. Se gli elementi non riempiono la riga, auto-fill conserva le tracce vuote, mentre auto-fit le comprime e allarga gli elementi esistenti. Con molti elementi il risultato è identico.
Riferimenti
Il riferimento (in inglese) di tutte le proprietà di CSS Grid, con esempi.
La guida visuale (in inglese) più citata alle proprietà del contenitore e degli elementi.
La specifica ufficiale (in inglese), compreso subgrid.
Strumenti correlati
- Verificatore Contrasto Colori Design Verificatore contrasto colori gratuito — verifica subito la conformità WCAG 2.2 AA e AAA. Anteprima live, simulazione daltonismo e suggerimenti colori...
- Convertitore di Colori Design Converti colori tra HEX, RGB, HSL e CMYK all'istante. Selettore di colori gratuito con controllo contrasto WCAG e generatore di palette.
- Generatore di Palette Colori Design Genera palette colori armoniose da qualsiasi colore base. Scegli armonia Analoga, Complementare, Triadica o Tetradica — esporta come CSS variables o JSON.
- Palette Colori da Immagine Design Estrai palette colori da qualsiasi immagine — ottieni codici HEX, RGB, HSL ed esporta come CSS variables, Tailwind, JSON o PNG. 100% nel browser, senza upload.
- Generatore CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Generatore CSS box shadow gratuito con anteprima in tempo reale. Crea ombre, effetti neumorfismo e glassmorfismo. Esporta in CSS, Tailwind o variabili CSS.
