Grid

Hvordan bruke grid?

.pkt-cell pkt-cell—span3
.pkt-cell pkt-cell—span3
.pkt-cell pkt-cell—span3
.pkt-cell pkt-cell—span3
<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>
Container

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%.

Dersom du Þnsker spacing pÄ venstre og hÞyre side av containeren kan du enten bruke modifier pkt-grid--padding (16px pÄ smÄ skjermer og 32px pÄ store) eller bruke spacing-hjelpeklassene.

Celler

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

11
1
10
2
9
3
8
4
7
5
6
6

Modifiers og helpers

pkt-grid

TypeModifier / HelperDefaultBeskrivelse
Bredde--phablet, --tablet, --tablet-big, --laptop, --desktop, --fullpkt-grid--fullMaksbredde pÄ containeren
Justering--left, --right, --centerpkt-grid--centerJustér container med margins
Gutters / Gap--gap-{spacing}, --colgap-{spacing}, --rowgap-{spacing}, --gap-{spacing}-{breakpoint}-up, --colgap-{spacing}-{breakpoint}-up, --rowgap-{spacing}-{breakpoint}-up16px / 32pxLes mer om gap under.
Padding--paddingingenLegger til 16px / 32px padding pÄ venstre og hÞyre side av grid-container
Marginsmx-size-16, mx-size-32-tablet-upautoBruk vÄre hjelpeklasser for spacing

pkt-cell

TypeModifier / HelperDefaultBeskrivelse
Bredde--span{n}, --span{n}-{breakpoint}-uppkt-cell--span1Antall kolonner cellen skal gÄ over. Span gÄr fra 1 til 12
Justering--left, --right, --center , --top, --center-vertical, --bottomjustify-self: autoJustér innholdet i celle

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.
Modifier / HelperBeskrivelse
--gap-{spacing}Gap mellom kolonner og rader. Alle verdier definert i spacing er tillatt.
--colgap-{spacing}Gap mellom kolonner. Alle verdier definert i spacing er tillatt.
--rowgap-{spacing}Gap mellom rader. Alle verdier definert i spacing er tillatt.
--gap-{spacing}-{breakpoint}-upGap mellom kolonner og rader fra et breakpoint og oppover.
--colgap-{spacing}-{breakpoint}-upGap mellom kolonner fra et breakpoint og oppover.
--rowgap-{spacing}-{breakpoint}-upGap mellom rader fra et breakpoint og oppover.

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.

MobilePhablettablettablet-biglaptopdesktop
pkt-grid--phablet100%36rem36rem36rem36rem36rem
pkt-grid--tablet100%100%48rem48rem48rem48rem
pkt-grid--tablet-big100%100%100%64rem64rem64rem
pkt-grid--laptop100%100%100%100%80 rem80rem
pkt-grid--desktop100%100%100%100%100%100rem
pkt-grid--full100%100%100%100%100%100%

“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.”

.pkt-grid—phablet
.pkt-grid—tablet
.pkt-grid—tablet-big
.pkt-grid—laptop
.pkt-grid—desktop
.pkt-grid—full
<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.

.pkt-grid—left
Default center
pkt-grid—right
<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.

1
2
3
4
<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.

6 kolonner
7 kolonner
8 kolonner
4 kolonner
<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.

.pkt-grid—gap-size-16 pkt-grid—gap-size-32-tablet-up

.pkt-grid—gap-size-16 pkt-grid—gap-size-32-tablet-up

.pkt-grid—gap-size-16 pkt-grid—gap-size-32-tablet-up

.pkt-grid—gap-size-16 pkt-grid—gap-size-32-tablet-up

<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