Hopp til hovedinnhold
LibraTool logoLibraTool

Gratis CSS Grid-generator

Utform et CSS-rutenett visuelt — spor, enheter og mellomrom — og kopier den genererte CSS og HTML.

Fungerer uten nett når den er lastet
Forhåndsinnstillinger
Kolonner (3)
Rader (2)
Live-forhåndsvisning
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>

🔒 Alt kjører i nettleseren din — ingenting lastes opp.

Hvordan det fungerer

Design et CSS-rutenett visuelt: legg til opptil 8 kolonner og 8 rader, sett hvert spor til fr, px, auto eller min/max-content, og juster rad- og kolonneavstand. Den nummererte forhåndsvisningen oppdateres umiddelbart, og den genererte grid-template-CSS-en pluss tilhørende HTML er ett klikk unna utklippstavlen.

  1. 1
    Form rutenettet
    Legg til/fjern kolonner og rader med + og −.
  2. 2
    Angi sporene
    Hver kolonne og rad får sin egen enhet (1fr, 100px, auto…).
  3. 3
    Juster avstandene
    Egne skyveknapper for row-gap og column-gap.
  4. 4
    Kopier koden
    Produksjonsklar CSS og tilhørende HTML-skjelett.

Alt kjører i nettleseren — ingenting lastes opp.

Relaterte verktøy

↔️

CSS Flexbox-generator

Eksperimenter med flex-retning, ombrytning, justify og align på live-elementer — og kopier CSS.

Prøv det
📐

CSS clamp()-generator

Generer en flytende CSS clamp()-verdi for responsiv typografi og avstand. Angi min-/maksstørrelse og visningsbredde-intervall, se en live forhåndsvisning og kopier CSS-en på én linje.

Prøv det
📓

Utskriftsvennlig papir — linjert, rutet, prikket og notepapir (PDF)

Skriv ut ditt eget papir: linjert (bredt eller college), rutet, prikkraster, isometrisk, skriveøvelser, notelinjer eller Cornell-notater, i A4, Letter, A5 eller Legal, i hvilken som helst linjefarge og med så mange sider du trenger. En skarp vektor-PDF laget i nettleseren din.

Prøv det

Ofte stilte spørsmål