Design · Gratis

Generatore CSS Grid

Crea un’anteprima della griglia e CSS da colonne, righe e spaziatura.

01Inserisci i valori

Funziona nel browser

—

Funziona nel browser

Crea un’anteprima della griglia e CSS da colonne, righe e spaziatura.

Funziona nel browser

I dati vengono elaborati su questa pagina e non vengono inviati a un server.

Informazioni sullo strumento

Crea una griglia CSS a colonne uguali e adatta il codice alla pagina.

Inserisci i valori
Colonne · Righe · Spazio
Calcola / genera
Crea un’anteprima della griglia e CSS da colonne, righe e spaziatura.
Risultato
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Crea una griglia CSS a colonne uguali e adatta il codice alla pagina.

Scenario di esempio

Risultato

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

Come interpretare il risultato?

Crea una griglia CSS a colonne uguali e adatta il codice alla pagina.

Dove vanno i miei dati?

I calcoli avvengono sul dispositivo. I dati non vengono inviati a un server.