Readdy logo

Generatore CSS Grid

Progetta visivamente CSS Grid: regola colonne, righe e spazi, crea aree e copia il codice

Anteprima griglia

1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3

CSS generato

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

Come usare il generatore CSS Grid

Progetta griglie complesse regolando i parametri e selezionando le celle, poi copia il codice nel progetto.

1

Imposta colonne e righe

Scegli quante ne servono e regola la struttura con i campi numerici.

2

Configura dimensioni e spazi

Definisci larghezze, altezze e gap con qualsiasi unità CSS.

3

Fai clic per selezionare le aree

Contrassegna le celle come aree della griglia nel CSS generato.

4

Copia il codice

Fai clic su "Copia codice" e incolla il CSS nel foglio di stile.

Perché usare il generatore CSS Grid

Non scrivere più griglie a mano: progettale visivamente, guardale in tempo reale e copia il codice.

  • Design visuale con un clic

    Guarda la griglia mentre la crei e seleziona le celle per definire aree con nome.

  • Supporto flessibile delle unità

    Usa unità CSS come fr, px, %, em, rem, auto, minmax() e repeat(), anche combinate.

  • Generazione immediata del codice

    Ottieni subito CSS pronto all'uso, senza codice manuale o errori di sintassi.

  • Nomi delle aree della griglia

    Seleziona le celle e il generatore scrive grid-template-areas, per un CSS leggibile e gestibile.

Domande frequenti

CSS Grid è un sistema bidimensionale per disporre elementi in righe e colonne, ideale per strutture complesse.
grid-template-areas assegna nomi alle zone della griglia. Il layout diventa leggibile usando riferimenti come 'header', 'sidebar' o 'main'.
Puoi usare fr, px, %, em, rem, auto, minmax(), repeat() e altre unità valide. fr distribuisce lo spazio in proporzione.
Sì. Il generatore CSS Grid è gratuito, senza registrazione né limiti.

Crea griglie perfette in pochi secondi