Generatore visuale CSS Grid online
Genera visivamente CSS Grid (colonne, righe, gap), direttamente nel tuo browser.
1fr = equal fraction of space. Adapt to your needs (px, %, auto…).
🔒 100 % lato client — nessun dato inviato
Crea visivamente il tuo layout CSS Grid impostando colonne, righe e gap, quindi copia il codice generato. L'anteprima si aggiorna in tempo reale, al 100% nel tuo browser, senza registrazione. Ideale per prototipare layout complessi senza scrivere a mano tutto il CSS.
What is it for?
- ▸ Definisci una griglia di colonne e righe con grid-template
- ▸ Imposta la spaziatura tra le celle con la proprietà gap
- ▸ Prototipa una gallery o una dashboard con CSS Grid
- ▸ Impara CSS Grid osservando l'effetto di ciascuna impostazione
FAQ
Come posso creare una CSS Grid responsive?
Definisci le colonne con unità flessibili come fr e minmax nel generatore; produce la proprietà grid-template-columns corrispondente da copiare nel tuo CSS.
Dovrei usare CSS Grid o Flexbox?
Grid si adatta ai layout bidimensionali (colonne e righe), mentre Flexbox è ideale per l'allineamento lungo un unico asse; spesso si usano insieme.
Cosa fa la proprietà gap in una griglia?
La proprietà gap imposta lo spazio tra colonne e righe della griglia senza aggiungere margini sui bordi; l'anteprima mostra il risultato in tempo reale.