TL
Tool Lab
💰Donare
💰Donare

CSS Grid Generator

Build CSS Grid layouts visually.

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

Informazioni su questo strumento

Il Generatore di Layout Grid CSS permette di progettare visivamente layout bidimensionali regolando grid-template-columns, grid-template-rows, proprietà gap e impostazioni di allineamento. L'anteprima live mostra esattamente com'è il grid prima di scrivere codice.

CSS Grid è il sistema di layout più potente in CSS, progettato per layout bidimensionali (righe E colonne contemporaneamente). Complementa Flexbox che gestisce layout unidimensionali.

Come usare

  1. Imposta grid-template-columns per la struttura delle colonne. Usa i pulsanti preset per pattern comuni.
  2. Imposta opzionalmente grid-template-rows (lascia auto per la maggior parte dei layout).
  3. Regola column-gap e row-gap per la spaziatura.
  4. Usa justify-items e align-items per controllare il posizionamento degli elementi nelle celle.
  5. Cambia il numero di elementi con il cursore per vedere come risponde il grid.
  6. Clicca Copia per copiare il CSS generato.

Casi d'uso

Gli sviluppatori front-end usano CSS Grid per layout di pagina, strutture di dashboard e gallerie di immagini. I designer esportano specifiche di grid come CSS esatto da condividere con gli sviluppatori. I team di design system lo usano per prototipare pattern di spaziatura e colonne.

Domande frequenti

  • Cosa significa 1fr? — fr è un'unità frazionaria. 1fr significa una frazione dello spazio disponibile. repeat(3, 1fr) crea tre colonne uguali.
  • Quando usare Grid vs Flexbox? — Usa Grid per layout bidimensionali (righe e colonne). Usa Flexbox per disporre elementi in una sola direzione.
  • CSS Grid è supportato in tutti i browser? — Sì. CSS Grid è completamente supportato in tutti i browser moderni dal 2017.