CSS Grid Generator

Visuell CSS Grid-byggare.

Mallar:

Kolumner (3)

Rader (2)

Kolumnavstand: 16pxRadavstand: 16px

JusteraJustera

Forhandsvisning

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

Bygg CSS Grid-layouts visuellt.

Referens

Egenskap	Beskrivning	Exempel
grid-template-columns	Kolumner	1fr 1fr 1fr
grid-template-rows	Rader	auto 1fr auto
gap	Avstand	16px
justify-items	Horisontellt	stretch
align-items	Vertikalt	stretch

FAQ

Vad ar CSS Grid?

CSS Grid ar ett tvadimensionellt layoutsystem.

Grid vs Flexbox?

Grid ar 2D, Flexbox ar 1D.

Vad betyder "fr"?

"fr" star for en del av det tillgangliga utrymmet.

Webblasarstod?

Ja, alla moderna webblasare.

Grid och Flexbox tillsammans?

Ja, de kompletterar varandra.

Relaterade verktyg

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

𝕏 Twitter in LinkedIn

Betygsätt detta verktyg

3.6 / 5 · 47 betyg

More Tools

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

Håll dig uppdaterad

Få veckovisa dev-tips och nya verktyg.

Ingen spam. Avsluta när som helst.

Enjoy these free tools?

☕Buy Me a Coffee