Gå til sidens indhold

Kode

Grid

Det fælles designsystem benytter et simpelt mobile-first flexbox grid til opbygning af sider. Grid-systemet er et standard 12-kolonne system med fem responsive breakpoints.

Grid-systemet bruger containere, rækker og kolonner til at opbygge sider. Grid-systemet bruger flexbox og er responsivt. Nedenfor kan du se eksempler på brugen af grid-systemet.

Installation

HTML Struktur

<div class="row">
    <div class="col">
        .col
    </div>
    <div class="col">
        .col
    </div>
    <div class="col">
        .col
    </div>
</div>

Indstillinger

Grid systemet har følgende standardindstillinger:

Ekstra lille
<576px
Lille
≥576px
Mellem
≥768px
Stor
≥992px
Ekstra stor
≥1200px
Max. container bredde None (auto) None (auto) None (auto) None (auto) 1200px
Klasser .col- .col-sm- .col-md- .col-lg- .col-xl-
Antal kolonner 12
Afstand mellem kolonner (Gutter) 32px (16px på hver side af en kolonne)
Kan indlejres Ja - man kan godt have rækker inde i en kolonne
Ændre kolonners rækkefølge Ja

Responsive klasser

Som udgangspunkt findes der 5 breakpoints: extra small, small, medium, large, or extra large.

Klasser som rammer alle breakpoints

Brug klassen .col eller .col-* uden responsivt prefix (fx. md).

1
2
3
4
5
6
7
8
9
10
11
12
col
col
col
col
col-8
col-4

Fra stablede kolonner til kolonner på række

Ved at bruge fx .col-md-* klassen vil kolonnerne til at begynde med være placeret lodret over hinanden på mobile enheder. Fra medium-skærme vil de være vist vandret på en række.

col-md-8
col-md-4
col-md
col-md
col-md

Brug af forskellige kolonne-klasser

Du kan mikse forskellige kolonne-klasser.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Kolonneombrydning

Hvis der er mere end 12 kolonner på en række, vil ekstra kolonner blive vist på en ny linje under de første 12.

.col-9
.col-4
9 + 4 = 13 > 12, det betyder at denne 4-kolonne div bliver vist på en nye linie
.col-6
Efterfølgende kolonner fortsætter på denne nye linie

Indlejre

Du kan indlejre flere rækker med tilhørende kolonner i hinanden.

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6

Ingen afstand mellem kolonner (ingen gutter)

Du kan fjerne mellemrum mellem kolonnerne ved at tilføje klassen no-gutters til rækken.

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4

'Auto' og 'Fill' kolonner

Du kan specificere bredden på en kolonne uden at angive en eksplicit nummer-klasse som fx col-sm-6.

Specifik bredde på kun én kolonne

Du kan tildele alle kolonner samme bredde ved kun at give én kolonne en eksplicit bredde (.col-6). De øvrige kolonner tilpasser sig automatisk samme bredde.

1 of 3
2 of 3 (.col-6)
3 of 3
1 of 3
2 of 3 (.col-5)
3 of 3

Individuel kolonnebredde efter indhold

Ved at brug col-{breakpoint}-auto kan du skabe individuel kolonnebredde: Kolonnerne tilpasser sig til deres indhold.

1 of 3
Kolonne med variabel bredde
3 of 3
1 of 3
Kolonne med variabel bredde
3 of 3

Rækkefølge

Klasser (classes)

Brug klasserne .order- til at bestemme den visuelle rækkefølge af kolonnerne. Disse klasser findes også i responsive udgaver fx .order-1.order-md-2).

Første kolonne, men ingen order-klasse
Anden kolonne, men vises som sidste kolonne
Tredje kolonne, men vises som anden kolonne

Forskyd kolonner

Brug klasserne .offset- til at forskyde kolonner, fx forskyder .offset-md-4 4 kolonner til højre.

1
2
3
4
5
6
7
8
9
10
11
12
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

Du kan nulstille forskydning ved fx at bruge klassen offset-md-0.

Hjælpeklasser

Designsystemet kommer med forskellige hjælpeklasser, fx. flex, margin og bredde. Du kan kombinere disse hjælpeklasser med grid-systemet.

Hjælpeklasser: Flexbox

Brug designsystemets flexbox hjælpeklasser til at ændre på placeringen af kolonnerne og placeringen af indholdet i kolonnerne.

Vertikal alignment

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns


One of three columns
One of three columns
One of three columns

Horisontal alignment

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns

Hjælpeklasser: Margin

Du kan bruge margin-hjælpeklasserne til at skabe indryk. Fx mr-auto.

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto

Hjælpeklasser: Bredde

Vil du have rækker og kolonner som går fra kant til kant, skal du undlade .container eller tilføje klassen w-percent-100.

Sass variabler i designsystemet

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
    // Extra small screen / phone
    xs: 0,
    // Small screen / phone
    sm: 576px,
    // Medium screen / tablet
    md: 768px,
    // Large screen / desktop
    lg: 992px,
    // Extra large screen / wide desktop
    xl: 1200px
);

$container-max-widths: (
    sm: 100%,
    md: 100%,
    lg: 100%,
    xl: 1200px
);