CSS Grid Generator

Visuell CSS Grid-bygger.

Maler:

Kolonner (3)

Rader (2)

Kolonneavstand: 16pxRadavstand: 16px

JusterJuster

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

Referanse

Egenskap	Beskrivelse	Eksempel
grid-template-columns	Kolonner	1fr 1fr 1fr
grid-template-rows	Rader	auto 1fr auto
gap	Avstand	16px
justify-items	Horisontalt	stretch
align-items	Vertikalt	stretch

FAQ

Hva er CSS Grid?

CSS Grid er et todimensjonalt layoutsystem.

Grid vs Flexbox?

Grid er 2D, Flexbox er 1D.

Hva betyr "fr"?

"fr" star for en brukdel av tilgjengelig plass.

Nettleserstotte?

Ja, alle moderne nettlesere.

Grid og Flexbox sammen?

Ja, de utfyller hverandre.

Relaterte verktoy

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

𝕏 Twitter in LinkedIn

Vurder dette verktøyet

3.6 / 5 · 47 vurderinger

More Tools

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

Hold deg oppdatert

Få ukentlige dev-tips og nye verktøy.

Ingen spam. Avslutt når som helst.

Enjoy these free tools?

☕Buy Me a Coffee