Du har laget en nettside med flexbox og fått elementer pent på rad. Men så trenger du et oppsett med både kolonner og rader samtidig. Kanskje en bildegalleri med jevne ruter, eller et dashbord der innholdet skal fylle spesifikke områder. CSS grid er bygget for akkurat dette. Grid gir deg et todimensjonalt rutenett der du kontrollerer både bredde og høyde på hver celle, og det krever overraskende lite kode å komme i gang.
Slik oppretter du en CSS grid container
For å aktivere grid setter du display: grid på et element. Da blir elementet en grid-container, og alle direkte barn blir automatisk grid-items. Dette minner om flexbox, men forskjellen er at grid jobber i to dimensjoner. Du definerer kolonner og rader, og nettleseren plasserer innholdet i cellene som oppstår.
Når du bare skriver display: grid uten noe mer, skjer tilsynelatende ingenting visuelt. Elementene stables fortsatt nedover som før. Det er først når du definerer kolonner at rutenettet tar form.
Definer kolonner med grid-template-columns
Egenskapen grid-template-columns bestemmer hvor mange kolonner gridet skal ha og hvor brede de skal være. Skriver du tre verdier, får du tre kolonner. Hver verdi angir bredden på en kolonne. Du kan bruke piksler, prosent eller den spesielle fr-enheten.
Et viktig poeng fra videoleksjonen: summen av kolonnene bør passe innenfor containerens bredde. Har du en container på 600 piksler og definerer tre kolonner som til sammen overstiger 600, får du overflytende innhold som stikker utenfor. Da må du enten justere breddeverdiene eller håndtere overflyt med overflow-egenskapen.
Du velger selv antall kolonner. To verdier gir to kolonner, fire verdier gir fire kolonner. Det finnes ingen fast grense.
Fr-enheten gjør gridet fleksibelt
Pikselverdier gir deg full kontroll, men de tilpasser seg ikke ulike skjermstørrelser. Det er her fr-enheten kommer inn. Fr står for fraction og fordeler tilgjengelig plass proporsjonalt. Skriver du 1fr 1fr 1fr, får du tre like brede kolonner. Skriver du 2fr 1fr 1fr, får den første kolonnen dobbelt så mye plass som de to andre.
Regnestykket er enkelt: summer alle fr-verdier, og del hver på totalen. Med 2fr 1fr 1fr har du 4 fraksjoner totalt. Første kolonne får 2 av 4, altså 50 prosent. De to andre får 25 prosent hver. Dette gir nøyaktig samme resultat som prosent, men fr-enheten er mer lesbar og vanligere i grid-sammenheng. For en grundigere gjennomgang av enheter, se artikkelen om måleenheter i CSS.
Rader og gap for luft i layouten
Kolonner er bare halve bildet. Med grid-template-rows definerer du høyden på radene. Syntaksen er identisk: du lister opp verdier for hver rad du vil ha. Rader du ikke definerer eksplisitt får automatisk høyde basert på innholdet.
For å legge til mellomrom mellom cellene bruker du gap. Denne egenskapen setter avstand mellom både kolonner og rader i en enkel linje. Du slipper å bruke margin på hvert enkelt grid-item, noe som gjør koden renere og mer forutsigbar.
Når velger du grid fremfor flexbox?
Grid og flexbox løser ulike problemer. Flexbox er best når du jobber i en retning: en rad med knapper, en kolonne med kort. Grid er best når du trenger kontroll over begge retninger samtidig. Et klassisk eksempel er en sidelayout med header, sidebar og hovedinnhold. Grid lar deg definere hele oppsettet i containeren, uten at barna trenger å vite noe om sin egen plassering.
I praksis bruker de fleste nettsider begge deler. Grid for den overordnede layouten, flexbox for komponentene inni. Du kan lese mer om grid-egenskaper i MDN sin dokumentasjon om CSS grid layout.
Lær mer om CSS grid med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du blant annet:
- Hvordan du bygger fleksible grid med fr-enheten og unngår overflyt
- Hvordan du plasserer elementer nøyaktig der du vil i et rutenett
- Hvordan du kombinerer grid og flexbox for komplette, responsive sidelayouter
