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>