Grid

Hvordan bruke grid?

<section class="pkt-grid">
  <div class="pkt-cell pkt-cell--span3">.pkt-cell pkt-cell--span3</div>
  <div class="pkt-cell pkt-cell--span3">.pkt-cell pkt-cell--span3</div>
  <div class="pkt-cell pkt-cell--span3">.pkt-cell pkt-cell--span3</div>
  <div class="pkt-cell pkt-cell--span3">.pkt-cell pkt-cell--span3</div>
</section>

Grid containeren er brukt til å holde på, gi luft til og plassere innholdet i en layout på siden. Denne har klassen pkt-grid. Default bredde på containeren er 100%.

Med gridsystemet angir man ikke kolonner og rader, men celler. En grid-celle er et rom du plasserer ditt innhold inni. Cellen fungerer som en celle i en tabell eller et regneark. Cellen fyller plassen på raden såfremt det er plass, hvis ikke faller de automatisk ned til neste rad. Cellene i vårt gridsystem skal ha klassen pkt-cell.

Hver celle tar opp 1/12 plass av GridContaineren, bruk modifiers om du ønsker andre bredder.

Vi bruker en 12 kolonnes gridsystem basert på CSS Grid Layout. Det anbefales sterkt å studere lenkene i bunnen av siden for å lære mer om CSS Grid Layout

Modifiers og helpers

pkt-grid

pkt-cell

pkt-gap

Gap er rommet mellom to kolonner, også kalt gutters. Default er disse:

• 16px for visningsområde 767px og smalere.
• 32px for visningsområde 768px og bredere.

Eksempler

Responsiv grid

Tabellen under illustrerer hvordan pkt-grid oppfører seg ved ulike breakpoints. Dersom vi ønsker at innholdet skal skalere med skjermbredden jobber vi med et fluid grid system. Responsivt design benytter seg av denne måten å designe på for å utnytte den tilgjengelige skjermplassen på en hvilken som helst enhet. Fluid betyr at kolonnebredden hele tiden vil øke/minke i størrelse i det visningsområdet endrer seg. Gap og marginer forblir samme størrelse.

“A fluid container will stretch to the outer boundaries of its outermost parent. Often, this is the browser, but in cases where a fluid grid is inside of a container between the browser and itself, it can still be fluid and 100% the width of its parent, but maybe not the browser.”

<section class="pkt-grid pkt-grid--phablet">
  <div class="pkt-cell pkt-cell--span12">.pkt-grid--phablet</div>
</section>

Justering av grid

Dersom containeren ikke tar full bredde, er det mulighet til å justere containeren til venstre, midt eller høyre. Default er venstre.

<section class="pkt-grid pkt-grid--phablet pkt-grid--left">
  <div class="pkt-cell pkt-cell--span12">.pkt-grid--left</div>
</section>

Responsive celler

Lag en responsive layout ved å angi hvor stor andel av siden innholdet skal ha på ulike skjermstørrelser.

• Full bredde på mobil.
• 4 celler fordelt på to rader fra tablet og opp

Resize nettleservinduet for å se hvordan det oppfører seg.

<section class="pkt-grid">
  <div class="pkt-cell pkt-cell--span12 pkt-cell--span6-tablet-up">1</div>
  <div class="pkt-cell pkt-cell--span12 pkt-cell--span6-tablet-up">2</div>
  <div class="pkt-cell pkt-cell--span12 pkt-cell--span6-tablet-up">3</div>
  <div class="pkt-cell pkt-cell--span12 pkt-cell--span6-tablet-up">4</div>
</section>

Automatisk wrapping

I dette eksempelet går ikke breddene opp i 12, og de wrappes derfor automatisk ned på linjen under. De to siste cellene faller dog fint på plass.

<section class="pkt-grid">
  <div class="pkt-cell pkt-cell--span6">6 kolonner</div>
  <div class="pkt-cell pkt-cell--span7">7 kolonner</div>
  <div class="pkt-cell pkt-cell--span8">8 kolonner</div>
  <div class="pkt-cell pkt-cell--span4">4 kolonner</div>
</section>

Responsiv gap/gutter

En gap/ gutter på 32px på tablet og oppover. 16px under.

<section class="pkt-grid pkt-grid--gap-size-16 pkt-grid--gap-size-32-tablet-up">
  <div class="pkt-cell pkt-cell--span3">
    .pkt-grid--gap-size-16 pkt-grid--gap-size-32-tablet-up
  </div>
  <div class="pkt-cell pkt-cell--span3">
    .pkt-grid--gap-size-16 pkt-grid--gap-size-32-tablet-up
  </div>
  <div class="pkt-cell pkt-cell--span3">
    .pkt-grid--gap-size-16 pkt-grid--gap-size-32-tablet-up
  </div>
  <div class="pkt-cell pkt-cell--span3">
    .pkt-grid--gap-size-16 pkt-grid--gap-size-32-tablet-up
  </div>
</section>

Les mer

• MDN - CSS Grid Layout
• Css-tricks - A Complete Guide to Grid
• CSS - In Real Life - Debugging CSS Grid Part 2: What the Fr(action)?
• CSS - In Real Life - Is it Time to Ditch the Design Grid?