Generatore di layout CSS Grid
Strumento gratuito e online per la generazione di layout CSS Grid, con editor visivo
Cos'e CSS Grid Layout?
CSS Grid Layout e un potente sistema di layout bidimensionale che permette di disporre elementi simultaneamente in righe e colonne. A differenza di Flexbox che gestisce una direzione alla volta, Grid offre il pieno controllo su entrambi gli assi. Le proprieta principali includono grid-template-columns per definire le tracce delle colonne, grid-template-rows per le tracce delle righe, gap per la spaziatura e grid-area per posizionare gli elementi in regioni denominate.
Come usare il generatore Grid
Usa lo slider Colonne per impostare il numero di colonne (da 1 a 12). Usa lo slider Righe per il numero di righe (da 1 a 12). Regola lo slider Gap per controllare la spaziatura tra le celle (da 0 a 32px). L'area di anteprima mostra una griglia live con celle numerate. Una volta soddisfatto, copia il codice CSS generato e incollalo nel tuo progetto.
Comprendere le proprieta Grid
grid-template-columns e grid-template-rows definiscono le dimensioni delle tracce. La funzione repeat() crea tracce uguali, ad esempio repeat(3, 1fr) crea tre colonne uguali. L'unita fr distribuisce lo spazio disponibile in modo proporzionale. gap imposta la spaziatura tra righe e colonne. Se necessario, puoi impostare valori diversi per row-gap e column-gap.
Pattern comuni di Grid
Layout Holy Grail: header a 3 colonne, contenuto principale con sidebar. Card dashboard: repeat(auto-fill, minmax(250px, 1fr)) crea griglie di card responsive. Hero a larghezza piena con contenuto sottostante: una colonna che si estende su tutte le righe. Layout rivista: span misti con grid-column e grid-row per dimensioni di cella variate.
Suggerimenti per griglie responsive
Usa auto-fill o auto-fit con minmax() per griglie responsive fluide senza media query. Combina con clamp() per dimensioni flessibili. Imposta una larghezza minima con minmax(200px, 1fr) in modo che gli elementi non si restringano troppo. Usa media query per cambiare il numero di colonne ai breakpoint. Considera le container query per responsivita a livello di componente.
▶Quando dovrei usare Grid invece di Flexbox?
▶Quali browser supportano CSS Grid?
▶Posso annidare griglie dentro griglie?
▶Come funzionano i gap della griglia?
▶Qual e la differenza tra auto-fill e auto-fit?
▶Come si usano le grid areas?
▶Come posso rendere la mia griglia responsive?
Se questo strumento è stato di aiuto per te, considera l’idea di regalarmi un caffè.
Comprami un caffè.