Hoppa till innehåll

CSS Grid-generator

Gratis CSS Grid-generator online. Visuell redigerare för rader, kolumner, mellanrum med automatisk kodgenerering. Bearbetas i webbläsaren.

CSS Grid-generatorn är ett gratis onlineverktyg som visuellt designar grid-layouter. Ställ in rader, kolumner, mellanrum och cellplacering genom att dra, med automatiskt genererad CSS Grid-kod. Förhandsgranskning i realtid ingår. Bearbetning sker i webbläsaren utan serveruppladdning – helt gratis för webblayoutdesign.

1
2
3
4
5
6
7
8
9
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; justify-items: stretch; align-items: stretch; }
HTML-kod
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>
lock Filer skickas inte till någon server

Hur använder man CSS Grid-generator?

  1. Ställ in antalet rader och kolumner.
  2. Dra celler för att slå samman områden eller justera placeringen.
  3. Kopiera den genererade CSS Grid-koden och använd den i ditt projekt.

Vanliga frågor om CSS Grid-generator

Vad är skillnaden mellan CSS Grid och Flexbox?

CSS Grid är för 2D-layouter (rader + kolumner), medan Flexbox är för 1D-layouter (rad eller kolumn). Grid passar bättre för komplexa sidlayouter.

Vad är fr-enheten?

fr (fraction) är en proportionell enhet som används i CSS Grid. Till exempel delar 1fr 2fr utrymmet i förhållandet 1:2. Den är mycket användbar för responsiva layouter.