Hvad er CSS Grid?
CSS Grid Layout er et todimensionalt layoutsystem indbygget i moderne browsere. Du definerer en gridbeholder med display: grid, og styrer derefter kolonner med grid-template-columns og rækker med grid-template-rows. Brøkenheder (fr) fordeler den tilgængelige plads proportionalt. Underelementer kan strække sig over flere kolonner eller rækker med grid-column: span N og grid-row: span N.
Sådan bruger du CSS Grid Generator
-
Angiv antallet af kolonner og rækker med talfelterne (1–12 for hvert).
-
Juster grid-template-columns og grid-template-rows for at styre størrelserne (f.eks. 1fr 2fr, 200px auto).
-
Angiv mellemrummet mellem celler (f.eks. 10px, 1rem).
-
Klik på en celle i forhåndsvisningen for at vælge den (den bliver orange).
-
Angiv col-span og row-span i panelet Celleomfang, og klik derefter Anvend. Celler med omfang bliver grønne.
-
Klik på CSS- eller HTML-fanen for at skifte outputformat, og kopiér til udklipsholder.
-
Klik Nulstil alt for at starte forfra med et nyt 3×3-gitter.