Slaan oor na hoofinhoud
LibraTool logoLibraTool

Gratis CSS Grid-kragopwekker

Ontwerp 'n CSS-rooster visueel — spore, eenhede en gate — en kopieer die gegenereerde CSS en HTML.

Werk vanlyn sodra gelaai
Voorinstellings
Kolomme (3)
Rye (2)
Live-voorkoms
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 Alles loop in jou blaaier — niks word opgelaai nie.

Hoe dit werk

Ontwerp 'n CSS-rooster visueel: voeg tot 8 kolomme en 8 rye by, stel elke baan na fr, px, auto of min/max-content, en verstel die ry-/kolom-gapings. Die genommerde lewendige voorskou werk oombliklik by en die gegenereerde grid-template-CSS plus passende HTML is een klik van jou knipbord af.

  1. 1
    Vorm die rooster
    Voeg/verwyder kolomme en rye met + en −.
  2. 2
    Stel die bane
    Elke kolom en ry kry sy eie eenheid (1fr, 100px, auto…).
  3. 3
    Verstel die gapings
    Aparte ry-gaping- en kolom-gaping-skuiwers.
  4. 4
    Kopieer die kode
    Produksie-gereed CSS en die passende HTML-skelet.

Alles loop in jou blaaier — niks word opgelaai nie.

Verwante gereedskap

↔️

CSS Flexbox-kragopwekker

Eksperimenteer met flex-rigting, -verpakking, -regverdigheid en -afstemming op live-items — en kopieer die CSS.

Probeer dit
📐

CSS klem() Generator

Genereer 'n vloeibare CSS clamp() waarde vir responsiewe tipografie en spasiëring. Stel minimum/maksimum grootte en kykpoortreeks, sien 'n regstreekse voorskou, en kopieer die eenreël CSS.

Probeer dit
📓

Drukbare papier — Gelyn, ruitjie, kolletjie en musiekstaf (PDF)

Druk jou eie papier: gelyn (wyd of college), ruitjie, kolletjierooster, isometries, handskrifoefening, musiekstaf of Cornell-notas, in A4, Letter, A5 of Legal, in enige lynkleur, met soveel bladsye as wat jy nodig het. 'n Skerp vektor-PDF wat in jou blaaier gemaak word.

Probeer dit

Gereelde vrae