Cos'è CSS Grid?
CSS Grid Layout è un sistema di layout bidimensionale integrato nei browser moderni. Definisci un contenitore griglia con display: grid, poi controlli le colonne con grid-template-columns e le righe con grid-template-rows. Le unità frazionarie (fr) distribuiscono lo spazio disponibile proporzionalmente. Gli elementi figlio possono estendersi su più colonne o righe usando grid-column: span N e grid-row: span N.
Come usare il Generatore CSS Grid
-
Imposta il numero di colonne e righe usando i campi numerici (1–12 ciascuno).
-
Regola grid-template-columns e grid-template-rows per controllare le dimensioni (es. 1fr 2fr, 200px auto).
-
Imposta lo spazio tra le celle (es. 10px, 1rem).
-
Fai clic su qualsiasi cella nell'anteprima per selezionarla (diventa arancione).
-
Imposta col-span e row-span nel pannello Estensione cella, poi fai clic su Applica. Le celle con estensione diventano verdi.
-
Fai clic sulla scheda CSS o HTML per cambiare il formato di output, poi Copia negli appunti.
-
Fai clic su Ripristina tutto per ricominciare con una nuova griglia 3×3.