Gå til hovedindhold
LibraTool logoLibraTool

Gratis CSS Grid-generator

Design visuelt et CSS-grid — spor, enheder og mellemrum — og kopier det genererede CSS og HTML.

Virker offline, når den er indlæst
Forudindstillinger
Kolonner (3)
Rækker (2)
Live-eksempel
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 kører i din browser — intet uploades.

Sådan fungerer det

Design et CSS-grid visuelt: tilføj op til 8 kolonner og 8 rækker, sæt hvert spor til fr, px, auto eller min/max-content, og justér række-/kolonneafstanden. Den nummererede live-forhåndsvisning opdateres øjeblikkeligt, og den genererede grid-template-CSS plus tilhørende HTML er ét klik fra din udklipsholder.

  1. 1
    Form gitteret
    Tilføj/fjern kolonner og rækker med + og −.
  2. 2
    Indstil sporene
    Hver kolonne og række får sin egen enhed (1fr, 100px, auto…).
  3. 3
    Justér afstandene
    Separate skydere for row-gap og column-gap.
  4. 4
    Kopiér koden
    Produktionsklar CSS og det tilhørende HTML-skelet.

Alt kører i din browser — intet uploades.

Relaterede værktøjer

↔️

CSS Flexbox-generator

Eksperimentér med flex-retning, ombrydning, justering og justering på live-elementer — og kopier CSS.

Prøv det
📐

CSS clamp()-generator

Generer en flydende CSS clamp()-værdi til responsiv typografi og afstand. Angiv min/max-størrelse og viewport-interval, se en liveforhåndsvisning og kopiér den ene linje CSS.

Prøv det
📓

Printbart papir — linjeret, ternet, prikket og nodepapir (PDF)

Print dit eget papir: linjeret (bred eller college), ternet, prikraster, isometrisk, skriveøvelser, nodelinjer eller Cornell-noter, i A4, Letter, A5 eller Legal, i en hvilken som helst linjefarve og med så mange sider, du har brug for. En skarp vektor-PDF lavet i din browser.

Prøv det

Ofte stillede spørgsmål