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:

• En grid-container med klassenavnet grid. Dette gjør at containeren får riktig display og layoutdeling. Typiske elementer du vil bruke her er blokkelementer som <section> eller <div>.
• En rekke elementer inne i grid-containeren med klasser som begynner med span- satt på seg.

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:

• span-whole
• span-three-quarters
• span-two-thirds
• span-half
• span-third
• span-quarter
• span-sixth

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>