Du har bygd en nettside som ser bra ut på din egen skjerm. Men så åpner du den på mobilen, og alt kollapser. Teksten flyter utenfor kanten, bildene er for store, og menyen er ubrukelig. Problemet er at nettsiden har faste størrelser som ikke tilpasser seg. Med responsiv design i CSS sørger du for at layouten fungerer uansett skjermstørrelse. Elementene strekkes, krympes eller flyttes for å gi best mulig brukeropplevelse på alt fra smarttelefoner til store PC-skjermer.
Hva responsiv design i CSS faktisk betyr
Responsiv design handler om at visningen av nettsiden tilpasses slik at den blir optimal for skjermstørrelsen. Besøker du VG.no på en mobil, ser siden annerledes ut enn på en datamaskin. Innholdet er det samme, men oppsettet endrer seg. Kort som ligger side om side på en bred skjerm, stables oppå hverandre på en smal. Navigasjonsmenyer som viser alle lenker horisontalt, kollapser til en hamburgermeny. Alt dette styres med CSS.
Målet er ikke bare at nettsiden fungerer på mobil. Målet er at brukeropplevelsen blir like god uansett enhet. Det betyr lesbar tekst uten zooming, knapper som er store nok til å trykke på, og innhold som ikke krever horisontal scrolling.
Container, row og kolonne: grunnstrukturen
Den mest typiske strukturen for responsiv design bygger på tre nivåer: en container, en row og kolonner for hvert element. Containeren definerer en maksbredde for innholdet, for eksempel 1140 piksler, og legger til litt padding på sidene slik at innholdet ikke treffer kanten. Raden bruker flexbox med display flex og flex-wrap satt til wrap. Det betyr at kolonnene kan hoppe ned til neste linje når det ikke er plass.
Hver kolonne bruker flex-egenskapen med verdiene 1, 0 og 0%. Det betyr at kolonnen kan vokse for å fylle tilgjengelig plass, helst ikke krympes, og har en basisstørrelse på null prosent. Kolonnen vokser med innholdet.
Avstand mellom kolonnene
Uten avstand klistrer kolonnene seg inntil hverandre. En enkel løsning er padding på 12 piksler på venstre og høyre side av hver kolonne. Men en mer fleksibel tilnærming er å bruke en universell selektor inne i raden. Du markerer alle elementer inne i row-klassen og gir dem padding. Deretter legger du til negativ margin på raden selv, med minus 12 piksler til venstre og høyre. Den negative marginen utligner paddingen på ytterkolonnene, slik at innholdet flukter med containeren.
Denne teknikken gjør at du kan ha ulike kolonnestørrelser i samme rad uten å skrive padding på hver enkelt klasse. Det er et mønster du finner i nesten alle CSS-rammeverk.
Hvorfor 12-kolonnersystemet fungerer
Det klassiske responsive oppsettet later som at hver rad inneholder 12 kolonner. Tallet 12 er valgt fordi det kan deles jevnt i 2, 3, 4 og 6. Fire like kolonner tar opp 3 av 12 hver, som tilsvarer 25 prosent. Tre kolonner tar opp 4 av 12, altså 33,33 prosent. To kolonner tar opp 6 av 12, som er 50 prosent. En kolonne alene fyller alle 12, altså 100 prosent.
Med dette systemet kan du mikse kolonnestørrelser fritt, så lenge summen går opp i 12. Det gir stor fleksibilitet uten at du trenger å beregne uvanlige prosentverdier.
Fra statisk til responsiv med media queries
Uten media queries bestemmer nettleseren selv hva som skjer når vinduet krymper. Kolonnene krympes vilkårlig og hopper ned til neste linje uten system. Med media queries tar du kontroll. Du definerer breakpoints der layouten endrer seg. Et vanlig oppsett bruker to breakpoints: 768 piksler for nettbrett og 992 piksler for desktop. Under 768 piksler stables alt i en kolonne. Mellom 768 og 992 piksler vises to kolonner per rad. Over 992 piksler vises fire kolonner.
Mobile-first: start smått
Den anbefalte tilnærmingen er mobile-first. Du definerer grunnstilen for den minste skjermen først, og bruker min-width i media queries for å legge til mer komplekse layouts etter hvert som skjermen vokser. Denne strategien gjør at mobilen alltid har en fungerende layout, mens bredere skjermer bygger videre på den. Du kan lese mer om tilnærmingen i MDN sin guide til responsiv design.
Lær mer om responsiv design med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du å:
- Sette opp container, row og kolonne-struktur fra bunnen av
- Bruke flexbox og media queries for å kontrollere layouten på ulike skjermstørrelser
- Bygge komplette responsive nettsider steg for steg
