Du har satt opp et CSS grid med kolonner og rader, og elementene legger seg pent i rekkefølge. Men hva når du vil at ett element skal strekke seg over flere kolonner, eller hoppe til en bestemt celle? Standard grid-oppførsel plasserer alt automatisk. CSS grid plassering gir deg full kontroll over nøyaktig hvor hvert element havner i rutenettet, og det gjør du ved å referere til gridets linjenumre.
Linjenumre er nøkkelen til CSS grid plassering
Hver grid-container har usynlige linjer mellom kolonnene og radene. Et grid med tre kolonner har fire kolonnelinjer, nummerert 1 til 4. Et grid med fire rader har fem radlinjer. Disse linjenumrene er det du bruker til å plassere elementer. Du kan se dem visuelt i nettleserens utviklerverktøy ved å inspisere grid-containeren og skru på grid-overlegget.
Plasser langs kolonner med grid-column
For å flytte et element horisontalt bruker du grid-column-start og grid-column-end. Start-verdien angir hvilken kolonnelinje elementet begynner ved, og slutt-verdien angir hvor det stopper. Setter du start til 2 og slutt til 4, strekker elementet seg fra linje 2 til linje 4 og dekker dermed to kolonner.
Du kan skrive dette kortere med grid-column. Da setter du start og slutt i en linje, atskilt med skråstrek. Resultatet er identisk, men koden blir mer kompakt. Denne korte formen er den vanligste måten å jobbe på.
Plasser langs rader med grid-row
Vertikal plassering fungerer på nøyaktig samme måte. Med grid-row-start og grid-row-end angir du hvilke radlinjer elementet skal strekke seg mellom. Og akkurat som med kolonner finnes den korte formen grid-row der du skriver begge verdier på en linje.
Når du kombinerer grid-column og grid-row på samme element, plasserer du det i et helt spesifikt område av gridet. Du kontrollerer både hvor bredt og hvor høyt elementet skal være.
Span lar deg telle celler i stedet for linjer
Noen ganger er det enklere å tenke i antall celler enn i linjenumre. Da bruker du nøkkelordet span. I stedet for å angi en sluttlinje skriver du span etterfulgt av et tall. Skriver du grid-column: 2 / span 2, betyr det: start ved linje 2 og strekk deg over to kolonner. Resultatet er det samme som grid-column: 2 / 4, men span-varianten kan være lettere å lese når du raskt vil se hvor mange kolonner et element dekker.
Du kan bruke span på rader også. Grid-row: 2 / span 2 betyr at elementet starter ved radlinje 2 og går over to rader nedover.
Kombiner alt med grid-area
Når du vil definere både kolonne- og radplassering i en eneste egenskap, bruker du grid-area. Syntaksen tar fire verdier i en bestemt rekkefølge: rad-start, kolonne-start, rad-slutt, kolonne-slutt. Denne rekkefølgen kan være vanskelig å huske, og videoleksjonen anbefaler å slå den opp på MDN hvis du er usikker.
Grid-area er spesielt nyttig når du har komplekse layouter der mange elementer har spesifikke plasseringer. Du kan lese mer om alle mulighetene i MDN sin dokumentasjon om grid-area.
Praktiske tips for presis plassering
Start med å tegne gridet ditt i hodet eller på papir. Tell linjenumrene for kolonner og rader. Bruk nettleserens utviklerverktøy til å visualisere linjene mens du jobber. Begynn med den korte formen grid-column og grid-row for enkle plasseringer, og ta i bruk grid-area når du trenger å definere hele posisjonen i en linje.
Når du har kontroll over plassering, er neste steg å bygge komplette sidelayouter. Grid-layout med template areas lar deg definere hele sidestrukturen visuelt, rett i CSS-koden. Vil du forstå hvordan boksmodellen påvirker størrelsen på grid-items, er det verdt å lese seg opp på det.
Lær mer om grid-plassering med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du blant annet:
- Hvordan du bruker linjenumre, span og grid-area for presis plassering
- Hvordan du kombinerer kolonne- og radplassering for komplekse oppsett
- Praktiske oppgaver der du trener på å plassere elementer i et grid
