Slik lager du en responsiv layout med CSS

Nettsiden din har fire kort som ligger pent ved siden av hverandre på desktop. Men når du krymper nettleservinduet, bestemmer nettleseren selv hva som skjer. Kortene presses sammen, teksten brekker merkelig, og til slutt hopper elementer ned til neste linje uten noe system. Du trenger en responsiv layout i CSS der du styrer nøyaktig hva som skjer på ulike skjermstørrelser. Løsningen er media queries kombinert med et kolonnesystem.

Responsiv layout med CSS og 12-kolonnersystemet

For å ta kontroll over layouten bruker du klasser som beskriver hvor mange kolonner et element skal fylle. Systemet bygger på at hver rad inneholder 12 usynlige kolonner. Når du skriver col-12, tar elementet opp hele bredden. Med col-6 fyller det halvparten, og med col-3 en fjerdedel. Summen av kolonnene i en rad skal alltid gå opp i 12.

Utgangspunktet er at alle kolonner starter som col-12 med flex satt til 0, 0, auto og bredde på 100 prosent. Det betyr at på den minste skjermen stables alt vertikalt. Derfra bygger du oppover med media queries.

Breakpoints: der layouten endrer seg

Et breakpoint er skjermbredden der en ny media query slår inn og endrer layouten. To vanlige breakpoints er 768 piksler for nettbrett og 992 piksler for desktop. Du definerer dem med min-width, som betyr at CSS-en gjelder fra den angitte bredden og oppover.

Ved 768 piksler kan du bytte fra col-12 til col-md-6. Elementene går fra full bredde til halvparten, altså to per rad. Ved 992 piksler bytter du til col-lg-3, som gir fire elementer per rad. Hver kolonne fyller da en fjerdedel av bredden.

Beregne riktig prosentverdi

Prosentverdien beregnes ved å dele antall kolonner elementet fyller på 12, og gange med 100. En kolonne som fyller 6 av 12 gir 50 prosent. En som fyller 3 av 12 gir 25 prosent. En som fyller 4 av 12 gir 33,33 prosent. Summen av prosentene i raden skal alltid bli 100.

Første gang du gjør dette, kan det lønne seg å bruke kalkulatoren. Når du har gjort det noen ganger, tar du regnestykket i hodet. Det skal alltid gå opp i 12, og det er hele poenget med systemet.

Slik bygger du opp reglene i riktig rekkefølge

Rekkefølgen på media queries er viktig. Du starter med grunnstilen for den minste skjermen, uten media query. Deretter legger du til breakpoints fra minst til størst. Først 768 piksler, så 992 piksler. Denne rekkefølgen kalles mobile-first og sikrer at smalere skjermer alltid har en fungerende layout.

Når nettleseren leser CSS-en, starter den med grunnstilen. Hvis skjermen er bred nok til å treffe et breakpoint, overstyrer media queryen de relevante egenskapene. Fordi du bruker min-width, legger du til kompleksitet etter hvert som det blir mer plass tilgjengelig.

Fleksible kolonneoppsett i praksis

Du trenger ikke alltid fire like kolonner. Du kan kombinere ulike størrelser så lenge summen blir 12. Et element med col-lg-8 og et med col-lg-4 gir to kolonner der den ene er dobbelt så bred som den andre. Slike oppsett brukes ofte for hovedinnhold med en sidebar ved siden av. Du kan også ha tre kolonner med col-md-4 som hver fyller en tredjedel.

Med flex-wrap aktiv hopper kolonner automatisk til neste rad hvis de overstiger 100 prosent samlet. Det betyr at du trygt kan ha seks col-md-6-elementer. De fordeler seg på tre rader med to kolonner i hver.

Vanlige feil med responsiv layout

En typisk feil er å bruke max-width i stedet for min-width i media queries. Da skriver du CSS for store skjermer først og prøver å overstyre nedover, som gir en mer komplisert og feilutsatt struktur. En annen feil er å glemme flex-wrap på raden. Uten wrap presses alle kolonnene inn på en linje uansett bredde. Du kan lese mer om flex-wrap og flexbox-egenskaper for å forstå samspillet bedre.

For en grundigere gjennomgang av hvordan responsive layouts fungerer i praksis, se MDN sin guide til responsive design.