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.

Åbn dette eksempel i et nyt vindue

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

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

Brug af forskellige kolonne-klasser

Du kan mikse forskellige kolonne-klasser.

.col-12 .col-md-8

.col-6 .col-md-4

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

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

Åbn dette eksempel i et nyt vindue

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

Horisontal alignment

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-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
);