Generatore CSS Grid

Costruttore visuale CSS Grid.

Preset:

Colonne (3)

Righe (2)

Gap colonne: 16pxGap righe: 16px

GiustificaAllinea

Anteprima

CSS generato

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.grid-item {
  padding: 16px;
  background: #e2e8f0;
  border-radius: 8px;
}

HTML generato

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Generatore CSS Grid gratuito

Costruisci layout CSS Grid visivamente.

Riferimento

Proprieta	Descrizione	Esempio
grid-template-columns	Definisce colonne	1fr 1fr 1fr
grid-template-rows	Definisce righe	auto 1fr auto
gap	Spaziatura	16px
justify-items	Allineamento orizzontale	stretch
align-items	Allineamento verticale	stretch

FAQ

Cos'e CSS Grid?

CSS Grid e un sistema di layout bidimensionale.

Grid vs Flexbox?

Grid e 2D, Flexbox e 1D.

Cosa significa "fr"?

"fr" rappresenta una frazione dello spazio disponibile.

Supporto browser?

Si, supportato da tutti i browser moderni.

Grid e Flexbox insieme?

Si, si completano perfettamente.

Strumenti correlati

CSS Flexbox Generator CSS Gradient Generator CSS Shadow Generator Em/Px Converter

𝕏 Twitter in LinkedIn

Valuta questo strumento

3.6 / 5 · 47 valutazioni

Altri strumenti

📐CSS Flexbox Generator 🌈CSS Gradient Generator 📐Em/Px Converter

Resta aggiornato

Ricevi consigli dev e nuovi strumenti ogni settimana.

Niente spam. Cancella quando vuoi.

Enjoy these free tools?

☕Buy Me a Coffee