CSS Grid-generator
Design CSS Grid-oppsettet visuelt — juster kolonner, rader og mellomrom, klikk celler for å lage områder og kopier koden
Forhåndsvisning av rutenett
Generert CSS
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}Slik bruker du CSS Grid-generatoren
CSS Grid er det kraftigste oppsettsystemet i CSS. Design avanserte rutenett visuelt ved å justere innstillinger og klikke celler for å definere områder — og kopier koden direkte til prosjektet.
Velg kolonner og rader
Velg antall kolonner og rader. Bruk tallfeltene for å justere rutenettstrukturen.
Angi størrelser og mellomrom
Definer kolonnebredder og radhøyder med valgfri CSS-enhet (fr, px, %, auto osv.). Angi avstand mellom cellene.
Klikk for å velge områder
Klikk på enkeltceller for å merke dem som navngitte områder. Hver valgt celle blir et eget område i CSS-en.
Kopier koden
Klikk på Kopier kode for å hente generert CSS. Lim den inn i stilarket og begynn å bygge oppsettet straks.
Hvorfor bruke CSS Grid-generatoren
Slutt å skrive rutenett-CSS for hånd. Design visuelt, se oppsettet i sanntid og kopier produksjonsklar kode med ett klikk.
Visuell pek-og-klikk-design
Se rutenettet mens du bygger. Klikk celler for navngitte områder — du slipper å se for deg grid-template-areas i hodet.
Fleksibel enhetsstøtte
Bruk alle gyldige CSS-enheter: fr, px, %, em, rem, auto, minmax(), repeat() og mer. Bland enheter for responsive oppsett.
Umiddelbar kodegenerering
Få produksjonsklar CSS når designen er ferdig. Ingen manuell koding eller syntaksfeil — bare kopier og lim inn.
Navngiving av rutenettområder
Velg celler for å lage navngitte områder. Generatoren skriver grid-template-areas og gjør CSS-en lesbar og vedlikeholdbar.