Gridsystem

Internetstiftelsens layout-grid är en 18-kolumnsgrid med 20 pixlars gap mellan varje kolumn, 10 pixlar på varje sida. Griden är baserad på flexbox.

Wrapper och Row

För att hålla dina containers på plats används en omgivande container med klassen .wrapper. Denna ser till att kolumnerna centreras och får en maxbredd på 1360px. Vill man ha en fullbred layout behövs inte denna omgivande container.

För varje rad med kolumner används en omgivande container med klassen .row

Kolumner

Det finns totalt 18 kolumner. För att styra hur många kolumner en container ska ta upp används klasserna .grid-{columns}.

.grid-1
.grid-17
.grid-2
.grid-16
.grid-3
.grid-15
.grid-4
.grid-14
.grid-5
.grid-13
.grid-6
.grid-12
.grid-7
.grid-11
.grid-8
.grid-10
.grid-9
.grid-9
.grid-10
.grid-8
.grid-11
.grid-7
.grid-12
.grid-6
.grid-13
.grid-5
.grid-14
.grid-4
.grid-15
.grid-3
.grid-16
.grid-2
.grid-17
.grid-1
.grid-18

Dynamisk kolumnbredd

Om en container alltid ska ta upp resterande tillgänglig yta behöver den bara ges klassen .grid

.grid-2
.grid-4
.grid

Kolumnbredd baserad på innehåll

Om en container alltid ska ta upp samma yta som dess innehåll används klasserna .grid-auto eller .grid-{breakpoint}-auto Läs mer om breakpoints.

.grid-md-auto
.grid-6
.grid

Breakpoints

Det finns 7 olika fasta breakpoints. Där emellan är containrarnas bredd dynamisk. Dessa breakpoints är följande:

  • xs: 0 < 469px
  • sm-xs: 469px ≥ 469px
  • sm: 576px ≥ 576px
  • md: 769px ≥ 769px
  • lg: 961px ≥ 961px
  • xl: 1200px ≥ 1200px
  • xxl: 1400px ≥ 1400px

För att ge en kolumn en viss bredd vid en viss breakpoint använd klasserna .grid-{breakpoint}-{columns}

OBS!: Du behöver bara ange den minsta breakpoint där du vill att det ska slå igenom. Vid lägsta breakpointen xs anges inget prefix utan då används istället .grid-{columns}

.grid-sm-6 .grid-18
.grid-sm-12 .grid-18
.grid-sm-9 .grid-18
.grid-sm-9 .grid-18
.grid-sm-12 .grid-18
.grid-sm-6 .grid-18

Vertikal linjering

Du kan få dina containers att linjera upptill, nertill eller ligga centrerade inuti sin parent. Applicera klasserna .align-items-start .align-items-end eller .align-items-center på din .row

Samtliga dessa klasser går att kombinera med breakpoints .align-items-{breakpoint}-start

.align-items-start
.grid-9
.grid-9
.align-items-end
.grid-9
.grid-9
.align-items-center
.grid-9
.grid-9
.align-items-baseline
.grid-9
.grid-9
.align-items-stretch
.grid-9
.grid-9

Horizontell linjering

Du kan få dina containers att linjera vänster, höger eller ligga centrerade inuti sin parent. Applicera klasserna .justify-content-start, .justify-content-end eller .justify-content-center på din .row

Samtliga dessa klasser går att kombinera med breakpoints .justify-content-{breakpoint}-start

.justify-content-start
.grid-3
.grid-3
.justify-content-end
.grid-3
.grid-3
.justify-content-center
.grid-3
.grid-3
.justify-content-around
.grid-3
.grid-3
.justify-content-between
.grid-3
.grid-3

Blanda

Du kan även blanda mellan dessa alternativ

.align-items-center.justify-content-center
.grid-3
.grid-3

Ordning

Eftersom flexbox stöder order så kan man även ändra ordning på kolumnerna i griden med .order-{column} eller .order-{breakpoint}-{column}. På så sätt kan man få till en visuell ändring av ordningen utan att logiken i markupen påverkas.

Först men sist
.order-2
.order-1
.order-2
.order-lg-1

Inget mellanrum

Om det finns behov av att ta bort mellanrummet mellan containers kan klassen .no-gutters användas på .row

.grid-9
.grid-9

Offset

Om det finns behov av att "putta" kolumner används margins, t.ex. .ml-auto (margin-left: auto), .mr-auto (margin-right: auto) eller .ml-{breakpoint}-auto om det bara ska ske vid vissa breakpoints.

Det går även att putta en kolumner med ett visst antal kolummner t.ex. .offset-{breakpoint}-{columns}

.grid-md-4
.grid-md-4 .ml-auto
.grid-md-3 .ml-md-auto
.grid-md-3 .ml-md-auto
.grid-auto .mr-auto
.grid-auto
.offset-3
.grid-auto
.offset-lg-5
.grid-auto

Wordpress gutenberg columns block grid

50%
50%

Two columns; one-third, two-thirds split

33%
66%
66%
33%

Three columns; equal split

33%

33%

33%

Three columns; wide center column

25%

50%

25%

One column

100%

Asymmetrisk grid

Placera kolumner asymmetriskt

Column 1
Column 2
Column 3
Column 1
Column 2
Column 3