Hoppa till huvudinnehåll
LibraTool logoLibraTool

Gratis CSS Grid-generator

Designa visuellt ett CSS-rutnät — spår, enheter och gap — och kopiera den genererade CSS och HTML.

Fungerar offline när den väl lästs in
Förinställningar
Kolumner (3)
Rader (2)
Live-förhandsvisning
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>

🔒 Allt körs i din webbläsare — ingenting laddas upp.

Så här fungerar det

Designa ett CSS-rutnät visuellt: lägg till upp till 8 kolumner och 8 rader, ställ in varje spår till fr, px, auto eller min/max-content, och justera rad-/kolumnmellanrummen. Den numrerade levande förhandsvisningen uppdateras direkt och den genererade grid-template-CSS:en plus matchande HTML är ett klick från ditt urklipp.

  1. 1
    Forma rutnätet
    Lägg till/ta bort kolumner och rader med + och −.
  2. 2
    Ställ in spåren
    Varje kolumn och rad får sin egen enhet (1fr, 100px, auto…).
  3. 3
    Finjustera mellanrummen
    Separata reglage för radavstånd och kolumnavstånd.
  4. 4
    Kopiera koden
    Produktionsklar CSS och matchande HTML-skelett.

Allt körs i din webbläsare — inget laddas upp.

Relaterade verktyg

↔️

CSS Flexbox-generator

Experimentera med flex-riktning, wrap, justify och align på live-objekt — och kopiera CSS.

Prova det
📐

CSS clamp()-generator

Generera ett flytande CSS clamp()-värde för responsiv typografi och avstånd. Ange min/max-storlek och vyportintervall, se en liveförhandsvisning och kopiera en-rads-CSS.

Prova det
📓

Utskrivbart papper — linjerat, rutat, prickat och notpapper (PDF)

Skriv ut ditt eget papper: linjerat (brett eller college), rutat, prickraster, isometriskt, skrivövning, notlinjer eller Cornell-anteckningar, i A4, Letter, A5 eller Legal, i valfri linjefärg och med så många sidor du behöver. En skarp vektor-PDF som skapas i webbläsaren.

Prova det

Vanliga frågor