Hva er CSS Grid?
CSS Grid Layout er et todimensjonalt oppsettssystem innebygd i moderne nettlesere. Du definerer en rutenettkontainer med display: grid, og kontrollerer deretter kolonner med grid-template-columns og rader med grid-template-rows. Brøkenheter (fr) fordeler tilgjengelig plass proporsjonalt. Underordnede elementer kan strekke seg over flere kolonner eller rader ved hjelp av grid-column: span N og grid-row: span N.
Slik bruker du CSS Grid Generator
-
Angi antall kolonner og rader med tallfeltene (1–12 for hvert).
-
Juster grid-template-columns og grid-template-rows for å styre størrelsene (f.eks. 1fr 2fr, 200px auto).
-
Angi mellomrommet mellom celler (f.eks. 10px, 1rem).
-
Klikk på en hvilken som helst celle i forhåndsvisningen for å velge den (blir oransje).
-
Angi col-span og row-span i panelet Celleomfang, og klikk deretter Bruk. Celler med omfang blir grønne.
-
Klikk på CSS- eller HTML-fanen for å bytte utdataformat, og kopier til utklippstavlen.
-
Klikk Tilbakestill alt for å starte på nytt med et nytt 3×3-rutenett.