CSS Grid-generator — gratis online verktøy

Hva er CSS Grid-generator?

Gratis online CSS Grid-generator. Lag og juster CSS Grid-oppsett med en visuell editor.

CSS Grid er et kraftig 2D-layoutsystem som lar deg arrangere innhold i rader og kolonner samtidig, noe som gjør det ideelt for komplekse sidelayouts, dashboards og responsive design. CSS Grid Generator gir et visuelt grensesnitt for å lage grid-layouts uten å skrive CSS for hånd, med en direkte forhåndsvisning som oppdateres når du justerer innstillingene.

Angi antall kolonner (1–12) og rader (1–12) med glidebrytere. Hver kombinasjon viser en umiddelbar forhåndsvisning med nummererte celler som representerer grid-elementene dine. Kolonne- og radavstandskontrollene lar deg legge til avstand mellom grid-cellene, fra 0 til 50 piksler. Juster disse og se forhåndsvisningscellene spre seg eller trekke seg sammen.

Justeringkontrollene setter justify-items (horisontal justering i hver celle) og align-items (vertikal justering i hver celle). Alternativene inkluderer start, end, center, stretch og baseline. Disse egenskapene styrer hvordan innholdet plasseres i hver grid-celle – for eksempel sentreres tekst både horisontalt og vertikalt i et grid-område for et dashboard-kort.

Den genererte CSS-utdataen inkluderer egenskapene grid-template-columns, grid-template-rows, gap, justify-items og align-items i et format som er klart til å kopieres. Forhåndsvisningen bruker nummererte celler slik at du kan verifisere at antall rader og kolonner samsvarer med den planlagte layouten. CSS Grid støttes i alle moderne nettlesere og er den anbefalte tilnærmingen for 2D-sideoppsett, og erstatter eldre metoder som flytbaserte layouts og kompleks flexbox-hekking.

Praktiske bruksområder for CSS Grid-generator

Lage et dashboard-grid med 3 kolonner og automatiske rader

Dashboardet ditt trenger 3 kolonner med lik bredde og 20px avstand. Sett kolonner til 3, rader til 3 (for 9 celler totalt) og avstand til 20px. Forhåndsvisningen viser 3x3-gridet. Kopier den genererte CSS-en inn i stilarket ditt. Hver celle representerer et dashboard-widget du kan fylle med diagrammer og målinger.

Bygge et responsivt fotogalleri-grid

Et fotogalleri trenger 4 kolonner på desktop med 10px avstand. Sett kolonner til 4, rader til 3 (12 bilder) og avstand til 10px. Forhåndsvisningen viser jevnt fordelte celler. Den genererte grid-template-columns: repeat(4, 1fr) lager kolonner med lik bredde som automatisk tilpasser seg containeren.

Lære CSS Grid-layout i et webutviklingskurs

En student som lærer CSS Grid, eksperimenterer med ulike kolonne- og radkonfigurasjoner. Endre kolonner fra 2 til 6 og se hvordan layouten endres. Veksle justify-items mellom center og stretch for å forstå justeringsadferden. De nummererte cellene gjør det tydelig nøyaktig hvor mange grid-områder som opprettes.

Hvorfor bruke CSS Grid-generator?

Justerbare kolonner (1-12) og rader (1-12)
Juster kolonne- og radgap
Ren, klar-til-bruk CSS

Slik bruker du CSS Grid-generator — Steg for steg

Juster antall kolonner og rader.

Juster flex-direction, wrap og justering.

Kopier den genererte CSS-koden.

Hvem er CSS Grid-generator best for?

sideoppsett
dashboards
gallerier

Profftips for CSS Grid-generator

1Bruk CSS Grid til den overordnede sidelayouten (topptekst, sidefelt, hovedinnhold, bunntekst) og Flexbox til innhold i hver grid-celle. De fungerer best sammen.
2repeat()-funksjonen i grid-template-columns (f.eks. repeat(3, 1fr)) er det vanligste mønsteret for kolonner med lik bredde. 1fr betyr én brøkdel av den tilgjengelige plassen.
3For responsive grids uten media queries bruker du auto-fit og minmax: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Dette lager kolonner som brytes automatisk.
4Nummererte grid-celler i forhåndsvisningen tilsvarer rekkefølgen på HTML-elementene dine. Grid plasserer automatisk elementer i cellene i henhold til rekkefølgen i oppmerkingen.

CSS Grid-generator — Ofte stilte spørsmål

What is CSS Grid?

CSS Grid Layout is a 2D layout system for CSS. It lets you arrange content in rows and columns, making it ideal for page layouts, dashboards, and complex responsive designs.

CSS Grid vs Flexbox?

Flexbox is 1D (either row or column), Grid is 2D (both). Use Grid for overall page layouts and complex 2D arrangements. Use Flexbox for 1D content distribution like navigation bars and card rows.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is CSS Grid-generator really free to use?

Yes, CSS Grid-generator is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Klar til å bruke CSS Grid-generator?

Gratis onlineverktøy — fungerer i nettleseren din, ingen registrering nødvendig. Begynn å bruke det nå.

Prøv det nå