Du kan plassere elementer i et grid med linjenumre, men det blir fort uoversiktlig når du bygger en hel side. Header skal dekke alle kolonnene, navigasjonen skal stå til venstre, hovedinnholdet i midten, og footer i bunnen. Å holde styr på alle start- og sluttverdier er krevende. CSS grid layout med template areas løser dette ved å la deg tegne layouten direkte i CSS-koden, nesten som et visuelt kart over siden.
Gi hvert element et navn med grid-area
Første steg er å gi hvert element i gridet et navn. Du gjør dette med egenskapen grid-area på hvert grid-item. For eksempel kan header-elementet få navnet "header", navigasjonen "nav", og hovedinnholdet "content". Navnene velger du helt selv. Poenget er at du senere bruker disse navnene til å plassere elementene i layouten.
I videoleksjonen bygges en side med seks elementer: header, nav, content, sidebar, ad og footer. Hvert element får sin egen grid-area med et beskrivende navn. Denne navngivningen gjør ingen visuell endring alene. Den forbereder bare elementene for neste steg.
Tegn layouten med grid-template-areas
Her skjer magien. På grid-containeren skriver du grid-template-areas og definerer layouten rad for rad. Hver rad skrives som en tekststreng der du plasserer navnene du definerte i forrige steg. Skriver du "header header header" på første rad, dekker headeren alle tre kolonnene. Skriver du "nav content sidebar" på neste rad, havner navigasjonen til venstre, innholdet i midten og sidepanelet til høyre.
Resultatet er en CSS-egenskap som visuelt ligner selve sidelayouten. Du kan lese koden og umiddelbart se hvordan siden er strukturert. Denne intuitive tilnærmingen er en av grunnene til at grid-template-areas er populært for sidelayouter.
Sett opp kolonner og rader for CSS grid layout
Template areas definerer hvor elementene havner, men du trenger fortsatt grid-template-columns for å bestemme bredden på kolonnene. I videoleksjonen settes tre kolonner til 1fr 4fr 1fr. Det betyr at midtkolonnen får fire ganger så mye plass som sidene. Navigasjon og sidebar blir smale, mens hovedinnholdet får mesteparten av bredden.
Med gap legger du til luft mellom alle cellene. 20 piksler gap gir jevn avstand uten at du trenger margin på hvert enkelt element. For å midtstille hele layouten bruker du margin: 0 auto sammen med en maksimumsbredde på containeren.
Endre hele layouten ved å flytte navn
Den store styrken med template areas er fleksibiliteten. Vil du flytte sidepanelet fra høyre til venstre? Bare bytt navnene i tekststrengene. Vil du at navigasjonen skal dekke to rader? Skriv "nav" på to rader i stedet for en. Hele layouten endres ved å redigere en eneste CSS-egenskap, uten at du rører HTML-strukturen.
Dette gjør det enkelt å eksperimentere med ulike oppsett. Du kan prøve forskjellige konfigurasjoner og umiddelbart se resultatet. Det fungerer også godt sammen med media queries der du definerer ulike template areas for ulike skjermstørrelser.
Vanlige feil å unngå
En typisk feil er å definere grid-area på elementene men glemme å opprette grid-template-areas på containeren. Da vet ikke nettleseren hva den skal gjøre med navnene, og layouten blir uforutsigbar. En annen feil er at navnene i template areas ikke stemmer overens med navnene på elementene. Skriv nøyaktig samme navn begge steder.
Husk også at hver rad i template areas må ha like mange navn som du har kolonner. Har du tre kolonner, må hver rad inneholde tre navn. Du kan lese mer om syntaks og avanserte muligheter i MDN sin dokumentasjon om grid-template-areas.
Lær mer om CSS grid layout med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du blant annet:
- Hvordan du bygger en komplett sidelayout med header, sidebar, innhold og footer
- Hvordan du bruker grid-plassering for mer presise oppsett
- Hvordan du kombinerer grid layout med responsive teknikker for ulike skjermstørrelser
