CSS Grid Generator

Visuele CSS Grid bouwer.

Presets:

Kolommen (3)

Rijen (2)

Kolom gap: 16pxRij gap: 16px

UitlijnenUitlijnen

Voorbeeld

CSS

.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

<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>

Gratis CSS Grid Generator

Bouw CSS Grid layouts visueel.

Referentie

Eigenschap	Beschrijving	Voorbeeld
grid-template-columns	Kolommen	1fr 1fr 1fr
grid-template-rows	Rijen	auto 1fr auto
gap	Afstand	16px
justify-items	Horizontaal	stretch
align-items	Verticaal	stretch

FAQ

Wat is CSS Grid?

CSS Grid is een tweedimensionaal layout systeem.

Grid vs Flexbox?

Grid is 2D, Flexbox is 1D.

Wat betekent "fr"?

"fr" staat voor een fractie van de beschikbare ruimte.

Browser ondersteuning?

Ja, alle moderne browsers.

Grid en Flexbox samen?

Ja, ze vullen elkaar aan.

Gerelateerde tools

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

𝕏 Twitter in LinkedIn

Beoordeel deze tool

3.6 / 5 · 47 beoordelingen

More Tools

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

Blijf op de hoogte

Ontvang wekelijkse dev-tips en nieuwe tools.

Geen spam. Altijd opzegbaar.

Enjoy these free tools?

☕Buy Me a Coffee