Spring til indhold

CSS Grid-generator

Gratis CSS Grid-generator online. Visuel editor for rækker, kolonner, mellemrum med automatisk kodegenerering. Behandles i browseren.

CSS Grid-generator er et gratis onlineværktøj, der visuelt designer grid-layouts. Indstil rækker, kolonner, mellemrum og celleplacering ved at trække, med automatisk genereret CSS Grid-kode. Forhåndsvisning i realtid inkluderet. Behandling i browseren uden serverupload — helt gratis til design af weblayout.

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-kode
<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 sendes ikke til nogen server

Hvordan bruger man CSS Grid-generator?

  1. Indstil antallet af rækker og kolonner.
  2. Træk celler for at sammenflette områder eller justere placering.
  3. Kopiér den genererede CSS Grid-kode, og brug den i dit projekt.

Ofte stillede spørgsmål om CSS Grid-generator

Hvad er forskellen mellem CSS Grid og Flexbox?

CSS Grid er til 2D-layouts (rækker + kolonner), mens Flexbox er til 1D-layouts (række eller kolonne). Grid er bedre egnet til komplekse sidelayouts.

Hvad er fr-enheden?

fr (fraction) er en proportional enhed, der bruges i CSS Grid. For eksempel deler 1fr 2fr pladsen i forholdet 1:2. Den er meget nyttig til responsive layouts.