Genera layout CSS Grid con modelli di colonne/righe e controlli di spaziatura
Un generatore CSS grid ti lascia costruire un layout a griglia in modo visivo — definendo colonne e righe e gli spazi tra esse — poi copiare il CSS che lo produce. CSS Grid è il sistema di layout più potente di CSS, progettato per layout bidimensionali dove controlli righe e colonne insieme, ma la sua sintassi per template, frazioni e spazi è densa e difficile da immaginare dal solo codice. Regolare le colonne e vedere la griglia riorganizzarsi è molto più rapido che modificare stringhe di template alla cieca.
Il pezzo che sblocca Grid è l'unità fr e le proprietà grid-template: fr divide lo spazio disponibile in parti flessibili, quindi un template "1fr 2fr" dà due colonne dove la seconda è larga il doppio, e il layout si ridispone in modo responsive senza larghezze fisse in pixel. Combinato con gap per una spaziatura coerente, questo gestisce layout di pagina, gallerie di immagini, dashboard e griglie di schede scomodi con tecniche più vecchie. Questo strumento genera CSS basato su standard nel browser, pronto da incollare, così puoi disporre una griglia a occhio invece che per tentativi.
fr sta per "frazione" e divide lo spazio disponibile in parti flessibili. Un template "1fr 1fr 1fr" crea tre colonne uguali, mentre "1fr 2fr" rende la seconda colonna larga il doppio della prima. A differenza dei pixel fissi, le colonne fr si flettono per riempire il contenitore in modo responsive.
Grid è costruito per layout bidimensionali — righe e colonne insieme — come la struttura di un'intera pagina o una griglia di schede. Flexbox eccelle in una direzione, una singola riga o colonna. Molti design usano Grid per il layout generale e Flexbox dentro i singoli componenti.
gap imposta una spaziatura coerente tra righe e colonne della griglia senza aggiungere margini agli elementi stessi. Si applica solo tra le celle, non attorno al bordo esterno, il che rende una spaziatura uniforme e prevedibile molto più facile che gestire margini su ogni elemento.
Sì. Oltre a definire la griglia, si può dire a singoli elementi di estendersi su più colonne o righe, così una scheda in evidenza può allungarsi attraverso il layout mentre altre restano in singole celle. Il generatore si concentra sulla definizione della griglia; l'estensione si imposta per elemento con grid-column e grid-row.
Generatore ombra box CSS · Generatore raggio bordo CSS · Generatore Flexbox · Generatore ombra testo CSS · Generatore animazioni CSS · Generatore filtri CSS