Benytt deg av CSS Grid og Flexbox når du skal bygge din neste nettside

Nettsider har i løpet av en periode på knappe tjue år gått fra å være enkle side kun bestående av tekst til å erstatte fullverdige magasiner bygget opp av typografi og andre designelementer. Som webdesignere har vi vært gjennom mange revolusjoner som i hovedsak bygger på tidligere utviklinger. De første versjonene av CSS ga oss mange muligheter til å velge fonter og farger, men layout har alltid vært en utfordring.

Rundt 2007 begynte man å bruke floats for å lage layouter og det fungerte, men etterhvert som mobilene kom ble det vanskelig å støtte seg på floats og samtidig støtte ulike oppløsninger. Mye endret seg da vi fikk tilgang på såkalte CSS-rammeverk som for eksempel Bootstrap, 960.gs pluss et hav av andre valgmuligheter. I de siste årene har dette vært standard for de fleste webdesignere og har spart mye tid og frustrasjon når det kommer til å utvikle responsive nettsider. Den største ulempen med disse rammverkene var at man måtte laste inn ekstra filer på nettsiden, samt at det ikke fantes standardiserte løsninger.

Heldigvis har kloke hoder gått sammen om å utvikle nye standardiserte verktøy for å bygge layouter i CSS som gir større frihet innen webdesign samtidig som de er responsive og fungerer på tvers av oppløsninger. I dag begynner disse å få såpass bred støtte i moderne nettlesere at de fint kan benyttes.

Flexbox

Flexbox lar deg definere områder i et design hvor elementene plasseres relativt i forhold til hverandre langs forhåndsdefinerte akser. Dette gjør det mulig å implementere designelementer som fordeler seg med lik avstand uten at man trenger å ha ulik kode for alle skjermoppløsninger. Flexbox muligjør også vertikal og horisontal sentrering av elementer, noe som har vært vanskeligere i tidligere versjoner av CSS.

CSS Grid

Rutenett, eller grids er brukt mye i både digitalt og trykket design. Inntil nylig har det ikke vært noen standardisert måte å lage rutenett i CSS på. Det vanligste har vært å benytte seg av rammeverk som definerer sitt eget rutenett. CSS Grid endrer dette. Her kan man definere egne rutenett ved hjelp av få linjer med kode. For de fleste webdesignere vil både Flexbox og CSS Grid kreve en viss innsats da man må tenke på design på en annen måte enn tidligere, men når man først har lært seg disse verktøyene vil man aldri gå tilbake til den gamle måten.