Generatore CSS Grid
Costruisci una griglia CSS (colonne, righe, gap) dal vivo e copia il CSS.
- Istantaneo
- Gratis
- Privato (elaborato localmente)
- Senza registrazione
Una griglia CSS, costruita dal vivo
Scegli il numero di colonne, righe e il gap: l’anteprima mostra le celle in tempo reale e il CSS del contenitore è pronto da copiare.
-
Imposta le colonne
Da 1 a 8 tracce uguali (1fr).
-
Imposta righe e gap
Numero di righe e spaziatura.
-
Copia il CSS
Applicalo al tuo contenitore grid.
Il CSS del contenitore (predefinito)
| Proprietà | Valore |
|---|---|
| display | grid |
| grid-template-columns | repeat(3, 1fr) |
| grid-template-rows | repeat(2, 1fr) |
| gap | 8px |
L’unità 1fr ripartisce lo spazio in parti uguali. Per il responsive, sostituisci con repeat(auto-fit, minmax(...)). Tutto è generato localmente.
Domande frequenti
Che differenza c’è tra CSS Grid e Flexbox?
Flexbox dispone gli elementi su un solo asse (riga o colonna); Grid lavora in due dimensioni (colonne e righe insieme). Grid è ideale per layout completi, Flexbox per allineamenti semplici.
Cosa significa repeat(3, 1fr)?
È un’abbreviazione di «3 colonne di 1 frazione ciascuna». L’unità fr ripartisce lo spazio disponibile in parti uguali. Quindi repeat(3, 1fr) crea tre colonne di pari larghezza che riempiono il contenitore.
Come rendo la griglia responsive?
Sostituisci un numero fisso con repeat(auto-fit, minmax(200px, 1fr)): le colonne si adattano automaticamente alla larghezza. Questo strumento genera una base a numero fisso, adattabile in seguito.
Il CSS vale per il contenitore o le celle?
Per il contenitore: display: grid e le proprietà grid-template definiscono la struttura. Le celle figlie si posizionano da sole nelle tracce create.