Generatore CSS Grid
Anteprima live
Perché usare un generatore visuale di CSS Grid?
CSS Grid è il sistema di layout più potente in CSS, ma la sua sintassi — grid-template-columns, grid-template-rows, unità fr, minmax(), repeat() — ha una curva di apprendimento ripida. Il nostro generatore visuale ti permette di configurare la tua griglia tramite cursori e menu a tendina e vedere il layout aggiornarsi istantaneamente, per capire l'effetto di ogni proprietà senza dover consultare la documentazione MDN.
Anteprima della griglia live
Vedi la tua griglia aggiornarsi in tempo reale mentre regoli colonne, righe, spaziatura e allineamento
Supporto alle unità fr
I template usano unità frazionarie (fr) per griglie flessibili e responsivi che si adattano alle dimensioni del contenitore
Output CSS pronto per l'uso
Esporta un blocco CSS .container pulito con grid-template-columns, rows, gap e align-items
Come creare un layout CSS Grid
Imposta colonne e righe
Usa i cursori per definire il numero di colonne e righe della tua griglia
Scegli il template e la spaziatura
Seleziona un template di colonne (uguale, fisso+flex, minmax responsivo) e regola la spaziatura tra le celle
Copia il CSS
Fai clic su 'Copia CSS' per il blocco CSS completo pronto per essere incollato nel tuo foglio di stile
Casi d'uso di CSS Grid
Layout di pagina
Costruisci strutture intestazione/barra laterale/contenuto principale/piè di pagina con aree di griglia nominate
Dashboard
Crea layout di dashboard complessi con schede di dimensioni diverse tramite grid-column e grid-row span
Gallerie di immagini
Costruisci gallerie di immagini stile masonry o uniformi con auto-fill e minmax per la responsività
Layout rivista
Crea layout editoriali con colonne asimmetriche ed elementi in evidenza che si estendono su più celle
Best practice per CSS Grid
✓ Preferisci le unità fr alle percentuali
L'unità fr (frazionaria) distribuisce lo spazio disponibile dopo le colonne di dimensione fissa, evitando di calcolare manualmente le percentuali per le colonne flessibili.
✓ Usa minmax() per griglie responsivi
repeat(auto-fill, minmax(250px, 1fr)) crea una griglia responsiva che regola automaticamente il numero di colonne — senza media query.
✓ Usa le aree di griglia nominate
grid-template-areas con celle nominate (header, sidebar, main, footer) rende i layout di pagina leggibili e facili da modificare.
✓ Comprendi auto-fill vs auto-fit
auto-fill crea quante più tracce possibile (lasciando tracce vuote). auto-fit comprime le tracce vuote ed espande gli elementi esistenti — generalmente migliore per le griglie di schede.
❓ Domande frequenti
Cos'è un'unità fr in CSS Grid?
fr sta per 'unità frazionaria'. 1fr rappresenta una frazione dello spazio libero disponibile nel contenitore della griglia. repeat(3, 1fr) crea 3 colonne uguali che condividono equamente tutto lo spazio disponibile.
In cosa CSS Grid differisce da Flexbox?
Flexbox è unidimensionale — dispone gli elementi lungo un singolo asse (riga o colonna). CSS Grid è bidimensionale — controlla righe e colonne simultaneamente, rendendolo molto più potente per i layout di pagina.
Cosa fa minmax()?
minmax(min, max) definisce un intervallo di dimensioni per una traccia di griglia. minmax(200px, 1fr) significa che una colonna ha almeno 200px di larghezza ma può crescere per riempire lo spazio disponibile — ideale per griglie responsivi.
Quando usare CSS Grid invece di Flexbox?
Usa Grid per i layout 2D dove hai bisogno di controllare simultaneamente righe e colonne. Usa Flexbox per i layout di componenti 1D come le barre di navigazione e le righe di moduli. La maggior parte dei layout moderni usa entrambi.