Gridsystem

Vi benytter et tolvspalters gridsystem laget med CSS Grid til å utforme sidemaler. Gridsystemet har egne klasser for å endre layout på mobil og nettbrett, og dersom ingen egne klasser for mobil og nettbrett er satt, vil elementet automatisk falle tilbake til å dekke hele skjermens bredde.

Enkelt forklart

For å ta i bruk gridsystemet trenger du to ting:

Fremfor å benytte klassenavn som sier hvor mange spalter et element skal dekke, benytter vi heller klassenavn som sier hvilket forholdstall elementet dekker i forhold til containeren. Klassenavnene du kan bruke er:

I tillegg kan du legge på -on-tablet og -on-mobile på slutten av et klassenavn dersom det skal gjelde kun for nettbrett eller kun for mobil. Merk at dette ikke gjelder for alle klassene; se implementasjonen for detaljer.

<section class="grid">
  <div class="span-third span-half-on-tablet span-whole-on-mobile>
    <p>
      Jeg vises som en tredjedel av bredden til vanlig, halvparten av bredden på nettbrett og hele bredden på mobil. Smart, hva?
    </p>
  </div>
</section>