Generatore CSS Grid
Il generatore CSS Grid crea layout a griglia partendo da numero di colonne e righe, gap, valori grid-template personalizzati facoltativi e allineamento degli elementi, con anteprima in tempo reale e CSS pronto da copiare.
Informazioni su questo strumento
Il generatore CSS Grid crea layout a griglia partendo da numero di colonne e righe, gap, valori grid-template personalizzati facoltativi e allineamento degli elementi, con anteprima in tempo reale e CSS pronto da copiare.
Come si usa
- Imposta il numero di colonne e di righe.
- Regola i gap tra colonne e tra righe.
- Se vuoi, inserisci template personalizzati come 200px 1fr 1fr.
- Scegli justify-items e align-items, poi clicca Copy CSS.
Da sapere
- L'unità fr ripartisce lo spazio libero: 1fr 2fr rende la seconda colonna larga il doppio della prima.
- repeat(3, 1fr) è l'abbreviazione per tre colonne uguali.
- column-gap e row-gap impostano gli spazi tra le tracce.
- Grid è bidimensionale e controlla righe e colonne insieme.
- repeat(auto-fit, minmax(200px, 1fr)) crea una griglia responsive senza media query.
Funziona interamente nel tuo browser: nulla di ciò che inserisci viene caricato o salvato.
Domande frequenti
Come creo una griglia a 3 colonne in CSS?
Usa display: grid; grid-template-columns: repeat(3, 1fr); sul contenitore e aggiungi un gap per la spaziatura.
Cosa significa fr in CSS Grid?
fr è una frazione dello spazio libero disponibile nel contenitore della griglia.
CSS Grid o Flexbox?
Grid è ideale per layout bidimensionali come strutture di pagina e griglie di card; Flexbox per righe o colonne monodimensionali.
Come creo una griglia responsive senza media query?
Usa grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); le colonne vanno a capo automaticamente in base allo spazio disponibile.