Ga naar hoofdinhoud
LibraTool logoLibraTool

Gratis CSS-rastergenerator

Ontwerp visueel een CSS-raster — tracks, eenheden en tussenruimtes — en kopieer de gegenereerde CSS en HTML.

Werkt offline na het laden
Voorinstellingen
Kolommen (3)
Rijen (2)
Live-voorbeeld
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 draait in je browser — niets wordt geüpload.

Hoe het werkt

Ontwerp visueel een CSS-grid: voeg tot 8 kolommen en 8 rijen toe, stel elke track in op fr, px, auto of min/max-content en pas de tussenruimtes tussen rijen/kolommen aan. Het genummerde live voorbeeld wordt direct bijgewerkt, en de gegenereerde grid-template-CSS plus bijpassende HTML staan met één klik op je klembord.

  1. 1
    Vorm het raster
    Voeg kolommen en rijen toe of verwijder ze met + en −.
  2. 2
    Stel de tracks in
    Elke kolom en rij krijgt een eigen eenheid (1fr, 100px, auto…).
  3. 3
    Stem de tussenruimtes af
    Aparte schuifregelaars voor row-gap en column-gap.
  4. 4
    Kopieer de code
    CSS klaar voor productie en het bijpassende HTML-skelet.

Alles draait in je browser — er wordt niets geüpload.

Gerelateerde tools

↔️

CSS-flexboxgenerator

Experimenteer met flex-richting, wrap, justify en align op live-items — en kopieer de CSS.

Probeer het
📐

CSS clamp()-generator

Genereer een vloeiende CSS clamp()-waarde voor responsieve typografie en spatiëring. Stel min/max-grootte en viewport-bereik in, bekijk een livevoorvertoning en kopieer de éénregelige CSS.

Probeer het
📓

Printbaar papier — lijntjes, ruitjes, stippen en muziekpapier (PDF)

Print uw eigen papier: gelinieerd (breed of college), ruitjes, stippenraster, isometrisch, schrijfoefening, notenbalk of Cornell-notities, in A4, Letter, A5 of Legal, in elke lijnkleur en met zoveel pagina's als u nodig hebt. Een scherpe vector-pdf, gemaakt in uw browser.

Probeer het

Veelgestelde vragen