Generatore Grid CSS
Genera layout CSS Grid visivamente con anteprima dal vivo. Regola colonne, righe, spaziature e template. Copia il codice CSS. Gratuito, 100% nel browser.
Anteprima
Riferimento
Cos'è CSS Grid?
CSS Grid è un sistema di layout bidimensionale che dispone il contenuto in righe e colonne. Mentre Flexbox è ideale per layout monodimensionali, Grid può controllare righe e colonne simultaneamente. È potente per creare layout di pagina complessi e dashboard.
Template Grid
grid-template-columns — definisce dimensione e numero delle colonne. 1fr 1fr 1fr per 3 colonne uguali, o repeat(3, 1fr). grid-template-rows — definisce dimensione e numero delle righe. Unità fr — specifica una frazione dello spazio disponibile. minmax() — specifica un intervallo di dimensioni min/max. auto-fill / auto-fit — regolazione automatica del numero di colonne per design responsivo.
Privacy
Tutta la generazione avviene al 100% nel tuo browser. Nessun dato viene inviato a server.