Generatore CSS Grid
Imposta colonne, righe e spazi con i cursori e vedi il risultato dal vivo. Copia CSS e HTML pronti da incollare nel tuo progetto.
Elaborato al 100% nel tuo browser
CSS
HTML
Ctrl + Enter eseguiCtrl + C copia risultato
Come si usa
- 1Regola il numero di colonne e righe.
- 2Imposta lo spazio tra colonne e righe.
- 3Scegli la larghezza delle colonne: uguali, fisse, automatica o adattiva.
- 4Copia il CSS e l’HTML generati.
Casi d’uso
- Creare una galleria di card che si adatta alla larghezza dello schermo.
- Montare lo scheletro di una dashboard.
- Capire come funzionano grid-template-columns e gap.
- Prototipare layout rapidamente prima di scrivere il codice.
Domande frequenti
Cos’è CSS Grid?
Un sistema di layout CSS bidimensionale che dispone gli elementi in righe e colonne.
Cosa fa auto-fit con minmax?
Crea tutte le colonne che entrano con una larghezza minima e le allarga per riempire lo spazio: ideale per layout adattivi senza media query.
Cosa significa 1fr?
Una frazione dello spazio disponibile. Tre colonne da 1fr dividono la larghezza in parti uguali.
Funziona su tutti i browser?
Sì, CSS Grid è supportato da tutti i browser moderni.