Generatore di layout CSS Grid

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.

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.

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.

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.

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.