Playground CSS Grid

CSS grid trasforma un elemento in un layout bidimensionale. Applichi display: grid al contenitore, definisci le tracce di colonne e righe con grid-template-columns e grid-template-rows, e il browser posiziona ogni elemento figlio nelle celle risultanti. Ad esempio, grid-template-columns: repeat(3, 1fr) crea tre colonne uguali e i figli scorrono da sinistra a destra e dall'alto al basso. A differenza dei vecchi layout con float o flexbox, grid gestisce righe e colonne contemporaneamente, così controlli entrambi gli assi da un'unica proprietà del contenitore.

Aggiungi display: grid a un contenitore, poi descrivi le sue tracce. Il minimo è una riga: display: grid; grid-template-columns: 1fr 1fr; — che crea due colonne uguali. Da lì aggiungi grid-template-rows per righe esplicite, gap per la spaziatura e regole per i singoli elementi come grid-column: span 2 per far estendere un figlio su più celle. La proprietà abbreviata grid può combinare righe, colonne e aree in una sola dichiarazione, ma la maggior parte degli sviluppatori imposta grid-template-columns, gap e allineamento separatamente perché risulta più leggibile. Questo generatore scrive quelle regole per te.

Definiscono la dimensione di ogni traccia di colonna e riga. grid-template-columns: 200px 1fr 1fr crea una prima colonna fissa di 200px e due colonne flessibili che si dividono lo spazio rimanente. grid-template-rows: auto 1fr imposta una prima riga dimensionata sul contenuto e una seconda riga che riempie l'altezza restante. Ogni valore nell'elenco è una traccia e il numero di valori determina quante colonne o righe esplicite ha la griglia. Questo generatore costruisce entrambi gli elenchi mentre aggiungi e modifichi le tracce, aggiornando l'anteprima in tempo reale.

fr è l'unità 'frazione' — divide lo spazio rimanente, quindi repeat(3, 1fr) crea tre colonne di larghezza uguale. repeat(n, valore) è una scorciatoia che ripete un pattern di traccia n volte, quindi repeat(4, 1fr) equivale a 1fr 1fr 1fr 1fr. minmax(min, max) imposta una traccia che non si restringe mai sotto il minimo né cresce oltre il massimo; minmax(150px, 1fr) mantiene una colonna larga almeno 150px permettendole di espandersi. Combinali — repeat(auto-fit, minmax(150px, 1fr)) — per una griglia che aggiunge e rimuove colonne da sola al variare della larghezza del contenitore.

Usa repeat() con auto-fit (o auto-fill) e minmax() così la griglia si ridispone automaticamente: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). Ogni colonna rimane larga almeno 200px e il browser ne inserisce quante ne permette il contenitore, riducendosi a meno colonne su schermi stretti e aggiungendone su quelli larghi. Passa il generatore alla modalità Responsiva, imposta la larghezza minima della cella e copia il risultato. È il modo più semplice per costruire una card grid fluida che si adatta da mobile a desktop senza scrivere nessuna media query.

grid-template-areas ti permette di assegnare nomi alle regioni e disegnare il layout come una mappa in ASCII. Assegni a ogni figlio un nome con grid-area, poi mappi la griglia con grid-template-areas: 'header header' 'sidebar main' 'footer footer'. Ripetere un nome su più celle fa estendere quell'area su di esse, mentre un punto (.) lascia una cella vuota. È il modo più leggibile per costruire strutture di pagina classiche — intestazione, barra laterale, contenuto principale, piè di pagina — perché il template somiglia al layout. La scheda Aree qui scrive il template e le regole grid-area corrispondenti per ogni regione che nomini.

Per una griglia 2x2 imposta due colonne e due righe: grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; e inserisci quattro elementi. Per una griglia a 3 colonne usa grid-template-columns: repeat(3, 1fr) e lascia che gli elementi scorrano nelle righe necessarie. In questo strumento basta impostare il numero di colonne e righe e l'anteprima si aggiorna subito — nessuna digitazione richiesta. Il generatore gestisce automaticamente la scorciatoia repeat() quando le tracce adiacenti hanno la stessa dimensione.

La griglia a 12 colonne è una convenzione di design resa popolare da Bootstrap e Foundation che divide la pagina in dodici colonne uguali. Dodici funziona perché si divide esattamente in metà, terzi, quarti e sesti. Un componente può occupare qualsiasi numero intero di colonne: 6 per la metà, 4 per un terzo, 3 per un quarto. Con CSS grid la ricrei in una riga: grid-template-columns: repeat(12, 1fr), e usi grid-column: span 4 sui figli per dimensionarli. Imposta le colonne a 12 qui per ottenere la classica griglia dei framework come semplice CSS senza dipendenza da Bootstrap.

Grid è bidimensionale — controlla righe e colonne insieme — mentre flexbox è monodimensionale, disponendo gli elementi lungo una singola riga o colonna. Usa grid quando costruisci una struttura di pagina complessiva o un layout a schede con righe e colonne allineate (dashboard, gallerie, strutture di pagina). Usa flexbox per una singola sequenza di contenuto come una navbar, una barra degli strumenti o una riga di pulsanti. Funzionano bene insieme: una griglia per la struttura esterna della pagina, flexbox all'interno delle singole celle.

Tailwind include le utility per le griglie: aggiungi grid più grid-cols-3 per tre colonne uguali, gap-4 per la spaziatura e col-span-2 / row-span-2 sui figli per farli estendere. grid-cols-3 compila in repeat(3, minmax(0, 1fr)). Per qualsiasi cosa personalizzata — come una traccia auto-fit responsiva — usa un valore arbitrario: grid-cols-[repeat(auto-fit,minmax(150px,1fr))]. Passa l'output alla scheda Tailwind e questo generatore scrive le classi utility esatte per il tuo contenitore e ogni elemento, pronte da incollare nel tuo JSX o markup HTML.

Usa grid-column e grid-row sull'elemento figlio. grid-column: span 2 rende un elemento largo due colonne; grid-column: 1 / 3 lo posiziona dalla linea 1 alla linea 3 (anche due colonne). Lo stesso vale verticalmente con grid-row: span 2. In Tailwind sono col-span-2 e row-span-2. In questo playground puoi trascinare tra le celle nell'anteprima per creare un elemento esteso, oppure digitare i valori esatti di inizio e span nel pannello dell'elemento. Sia l'output CSS che quello Tailwind si aggiornano man mano.

La proprietà gap aggiunge spazio tra le tracce: gap: 16px inserisce 16px tra ogni riga e colonna. Puoi impostare gli assi separatamente con gap: 24px 16px (prima row-gap poi column-gap), oppure usare direttamente row-gap e column-gap. Gap agisce solo sullo spazio tra le celle — non aggiunge mai padding attorno al bordo esterno della griglia, che è una fonte comune di confusione. Usa i controlli row-gap e column-gap qui — collegali per un gap uniforme o scollegali per regolare ciascun asse in modo indipendente.

Completamente gratuito, nessuna registrazione, nulla da installare. Layoutit Grid è un buon punto di partenza ma non ha output Tailwind e richiede di navigare in una scheda separata per copiare le regole grid-area. Il CSS Grid Generator di Sarah Drasner è uno strumento educativo minimale, privo di controlli a livello di elemento o link condivisibili. UtiloKit aggiunge output Tailwind CSS, aree template con nome, modalità auto-fit responsiva, link condivisibili e un editor interattivo drag-to-span — tutto in un unico posto. Tutto viene generato localmente nel tuo browser, quindi i tuoi layout non vengono mai caricati.

Sì. Lo strumento è completamente responsivo e funziona in qualsiasi browser mobile moderno, incluso Safari su iPhone e Chrome su Android. Costruisci layout grid in mobilità, copia l'output CSS o Tailwind e incollalo nel tuo progetto. Poiché tutto gira lato client, non ci sono caricamenti, nessun account e nessuna attesa. Funziona anche offline una volta che la pagina è stata caricata. L'editor drag-to-span è ottimizzato per il tocco, quindi puoi costruire layout grid complessi senza mouse.