Introduktion til CSS Grid Layout
CSS Grid Layout er et todimensionelt layoutsystem til webdesign, som gør det muligt at styre både vandrette søjler og lodrette rækker samtidigt. Med CSS Grid-generator kan du visuelt konfigurere strukturen for dit grid og placere elementer direkte i browseren. Værktøjet genererer automatisk den korrekte CSS- og HTML-kode, som du kan kopiere og indsætte direkte i dit eget projekt.
Dit grid opbygges direkte i din browser. Intet af det, du indstiller her, uploades til BroBroGo.
Konfiguration af søjler, rækker og mellemrum
For at opbygge dit layout skal du definere grid-strukturen ved hjælp af de primære inputfelter:
- Søjler: Et antal fra 1 til 12.
- Rækker: Et antal fra 1 til 12.
- Søjlemellemrum: En værdi mellem 0 og 48px.
- Rækkemellemrum: En værdi mellem 0 og 48px.
Hvert spor (søjle eller række) har sit eget størrelsesfelt, hvor du kan indtaste en hvilken som helst gyldig CSS-grid-værdi. Du kan blandt andet benytte følgende formater:
1fr(fleksibel brøkdel)200px(fast pixelværdi)auto(automatisk tilpasning baseret på indhold)min-content(mindste mulige bredde for indholdet)minmax(120px, 1fr)(en dynamisk grænse mellem en minimums- og maksimumsværdi)
Hvis du indtaster en ugyldig værdi som f.eks. not-a-grid-track i et størrelsesfelt, vil inputfeltet blive markeret som ugyldigt. Den genererede CSS-kode vil i dette tilfælde bevare den senest gyldige værdi, der blev registreret.
Forståelse af grid-template-columns og grid-template-rows
De værdier, du indtaster under Søjlestørrelser og Rækkestørrelser, definerer CSS-egenskaberne grid-template-columns og grid-template-rows for din grid-container.
Når du designer dit layout, optimerer generatoren den resulterende CSS-kode. Spor, der deler samme størrelse, samles automatisk i en repeat()-funktion i den genererede CSS-kode for at holde koden kort og overskuelig.
Søjlemellemrum og rækkemellemrum indstilles uafhængigt af hinanden. Hvis du vælger den samme værdi for både Søjlemellemrum og Rækkemellemrum, slås de to egenskaber automatisk sammen til en enkelt gap-egenskab i den færdige CSS-kode.
Placering af elementer på dit grid
Når du har defineret dine rækker og søjler, kan du placere op til maksimalt 16 elementer på dit grid.
Placeringen sker ved, at du klikker og trækker hen over cellerne for at markere et rektangel. Når du slipper musen, oprettes der et placeret element, som spænder over de valgte søjler og rækker.
Hvert element, du tegner, tildeles sine egne grid-column og grid-row regler i CSS-koden samt en tilsvarende div i HTML-koden. Elementer må gerne overlappe hinanden. Det element, der tegnes sidst, vil lægge sig øverst i layoutet. Hvis du ønsker at fjerne et specifikt element, kan du klikke på "×" på det pågældende element.
Du kan også styre elementerne manuelt via grænsefladen:
- Tilføj element: Genererer et nyt HTML-element i dit layout.
- Ryd elementer: Fjerner alle placerede elementer, hvilket resulterer i en tom HTML-container og et elementantal på 0.
Forudindstillinger for layoutstrukturer
Værktøjet indeholder en række færdige skabeloner under sektionen Forudindstillinger, som gør det hurtigt at visualisere klassiske layoutmønstre:
| Forudindstilling | Struktur og elementer |
|---|---|
| Sidebjælke | Layout med en dedikeret sidebjælke til navigation eller sekundært indhold. |
| Sidehoved & sidefod | Klassisk tredelt struktur med top- og bundbjælker. |
| Galleri | Genererer automatisk et grid med 3 søjler, 2 rækker og 3 placerede elementer. |
| Kontrolpanel (Dashboard) | En kompleks struktur velegnet til datavisualisering og administrative paneler. |
Tilgængelighed og responsivt design
Når du overfører den genererede kode til dit eget projekt, bør du overveje, hvordan layoutet tilpasser sig forskellige skærmstørrelser og hjælpemidler.
Brug af relative enheder som fr eller funktioner som minmax() sikrer, at dine søjler og rækker kan skalere flydende på mindre skærme. Vær opmærksom på, at den rækkefølge, elementerne er placeret i på skærmen via grid-column og grid-row, kan afvige fra den rækkefølge, de optræder i HTML-koden. For at sikre god tilgængelighed for skærmlæsere bør den logiske rækkefølge i HTML-strukturen altid afspejle den naturlige læserækkefølge.
Ofte stillede spørgsmål (FAQ)
Hvordan placerer jeg elementer på mit grid?
Klik og træk hen over cellerne for at markere et rektangel — når du slipper, bliver det til et placeret element, der spænder over de valgte søjler og rækker. Hvert element, du tegner, får sin egen grid-column og grid-row regel i CSS-koden og en tilsvarende div i HTML-koden. Elementer må gerne overlappe, og det element, der tegnes sidst, lægger sig øverst; brug × på et element for at fjerne det.
Kan søjler og rækker have forskellige størrelser?
Ja. Hvert spor (track) har sit eget størrelsesfelt, og du kan indtaste en hvilken som helst grid-værdi der — f.eks. 1fr, 200px, auto, min-content eller minmax(120px, 1fr). Spor, der deler samme størrelse, samles i repeat() for at holde koden kort. Søjlemellemrum (column-gap) og rækkemellemrum (row-gap) indstilles hver for sig, og slås sammen til et enkelt gap, hvis de er ens.
Hvad gør jeg med den genererede kode?
Kopier både CSS- og HTML-koden. HTML-koden giver dig containeren med én div pr. element, og CSS-koden definerer selve grid'et og placerer hvert element. Indsæt begge dele i dit projekt for at få præcis det layout, du har tegnet her.
Hvor mange elementer kan jeg maksimalt tilføje til mit layout?
Værktøjet understøtter maksimalt 16 placerede elementer ad gangen.