Playground CSS Grid

Tutti gli strumenti

Componi visivamente template, spaziature e posizionamento CSS Grid, quindi copia il CSS di layout.

Anteprima

Clicca su un elemento numerato nella griglia per selezionarlo e riposizionarlo.

grid-template-columns —
grid-template-rows —
CSS generato
—
—
Colonne
Righe
Spaziature
16px
16px
Allineamento
Elementi della griglia
Elemento 1
Preset

Informazioni su Playground CSS Grid

Il CSS Grid Playground compone layout a griglia reali in modo visivo. Aggiungi e rimuovi tracce di colonne e righe per definire grid-template-columns e grid-template-rows, imposta gli spazi tra colonne e righe e regola tutte e quattro le proprietà di allineamento — justify-items, align-items, justify-content e align-content — mentre l'anteprima riflette ogni modifica all'istante.

Il posizionamento degli elementi è dove le griglie diventano davvero potenti: aggiungi elementi, clicca su uno nell'anteprima per selezionarlo e posizionalo con column start, column span, row start e row span. È così che sidebar, header e celle in evidenza si estendono su più tracce — la tecnica alla base di quasi ogni layout a griglia del mondo reale.

Tre preset — holy grail, dashboard e gallery — caricano strutture di pagina classiche da analizzare e adattare. Quando il layout è quello giusto, copia il CSS generato, che contiene tutte le regole del contenitore griglia e il posizionamento di ogni elemento.

Come usare Playground CSS Grid

  1. Aggiungi o rimuovi tracce di colonne e righe per definire il template della griglia.
  2. Imposta lo spazio tra colonne (column gap) e tra righe (row gap).
  3. Regola i controlli di allineamento: justify-items, align-items, justify-content e align-content.
  4. Aggiungi elementi, clicca su uno nell'anteprima e imposta il suo column/row start e span per posizionarlo.
  5. Carica il preset holy grail, dashboard o gallery per studiare un layout classico.
  6. Copia il CSS generato nel tuo foglio di stile.

Domande frequenti

justify-items allinea ogni elemento all'interno della propria cella della griglia; justify-content allinea l'intera griglia all'interno del contenitore quando le tracce non lo riempiono completamente. La stessa distinzione si applica in verticale con align-items rispetto ad align-content.

Seleziona l'elemento e aumenta il suo column span — il CSS generato usa grid-column con un valore di span. Combinato con un row span puoi costruire barre di intestazione, sidebar e grandi celle in evidenza all'interno della stessa griglia.

Lo scheletro di pagina classico: header e footer a piena larghezza con tre colonne tra di loro — navigazione, contenuto principale e una sidebar laterale. Era notoriamente complicato da realizzare con i float; il preset mostra come poche regole di posizionamento nella griglia lo risolvano in modo pulito.

Grid eccelle nei layout bidimensionali dove righe e colonne devono allinearsi — struttura di pagina, dashboard, gallerie. Flexbox è ideale per flussi monodimensionali come barre degli strumenti e menu. Si combinano bene: grid per la pagina, flex all'interno dei componenti.

Sì, è gratuito e basato sul browser — sperimenta quanto vuoi, e nulla di ciò che crei esce dal tuo computer.
Condividi
Strumenti correlati
Generatore di firma e-mail Crea una firma e-mail HTML professionale da 30 template, personalizzala e salvala. Gratuito
Icona in PNG Converti Bootstrap Icons, Font Awesome e altro in immagini PNG personalizzate — gratis, nel browser. Gratuito
Generatore di icone app Genera un set completo di icone app pronte per la pubblicazione su App Store e Google Play — sfondi premium con gradienti, mesh e pattern, creati dal tuo logo. Gratuito
Generatore di favicon Crea un pacchetto completo di favicon a partire da un logo, un'icona o un monogramma — favicon.ico, PNG moderni, icona Apple touch, icone PWA, manifest web e snippet HTML. Gratuito
Generatore CSS Box Shadow Crea box-shadow CSS a strati con cursori in tempo reale per offset, sfocatura, diffusione, colore, opacità e inset — anteprima su un elemento reale e copia il CSS pronto all'uso. Gratuito
Generatore di Border Radius CSS Crea visivamente il border-radius CSS con anteprima in tempo reale e copia codice pronto per la produzione. Gratuito
Ricerche popolari
generatore css grid playground css grid generatore grid-template-columns generatore layout css grid creatore grid-template-areas strumento gap css grid visualizzatore css grid
Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.
Segnala un problema

Aggiungi questo strumento gratuito al tuo sito web — copia e incolla il codice qui sotto.