Gå til sidens indhold

Design

Grid

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

Introduktion

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

<div class="grid-example">
    <div class="container">
        <div class="row">
            <div class="col">
                .col
            </div>
            <div class="col">
                .col
            </div>
            <div class="col">
                .col
            </div>
        </div>
    </div>
</div>

Eksemplet ovenfor viser tre kolonner som har samme bredde på både mobil, tablet og desktop.

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

<div class="grid-example">
    <div class="container">
        <div class="row mb-2 grid-example-measure-row">
            <div class="col-1">
                <div class="align-text-center px-2">1</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">2</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">3</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">4</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">5</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">6</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">7</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">8</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">9</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">10</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">11</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">12</div>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col">col</div>
            <div class="col">col</div>
            <div class="col">col</div>
            <div class="col">col</div>
        </div>
        <div class="row">
            <div class="col-8">col-8</div>
            <div class="col-4">col-4</div>
        </div>
    </div>
</div>

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.

<div class="grid-example">
    <div class="container">
        <div class="row mb-2">
            <div class="col-md-8">col-md-8</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md">col-md</div>
            <div class="col-md">col-md</div>
            <div class="col-md">col-md</div>
        </div>
    </div>
</div>

Brug af forskellige kolonne-klasser

Du kan mikse forskellige kolonne-klasser.

<div class="grid-example">
    <div class="container w-percent-100">
        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <div class="row mb-2">
            <div class="col-12 col-md-8">.col-12 .col-md-8</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        </div>

        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
        <div class="row mb-2">
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        </div>

        <!-- Columns are always 50% wide, on mobile and desktop -->
        <div class="row">
            <div class="col-6">.col-6</div>
            <div class="col-6">.col-6</div>
        </div>
    </div>
</div>

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.

<div class="grid-example">
    <div class="container">
        <div class="row">
            <div class="col-9">.col-9</div>
            <div class="col-4">
                .col-4<br>9 + 4 = 13 &gt; 12, det betyder at denne 4-kolonne div bliver vist på en nye linie</div>
                <div class="col-6">
                    .col-6<br>Efterfølgende kolonner fortsætter på denne nye linie</div>
                </div>
            </div>
        </div>

Indlejre

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

<div class="grid-example">
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                Level 1: .col-sm-9
                <div class="row">
                    <div class="col-8 col-sm-6">
                        Level 2: .col-8 .col-sm-6
                    </div>
                    <div class="col-4 col-sm-6">
                        Level 2: .col-4 .col-sm-6
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Ingen afstand mellem kolonner (ingen gutter)

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

<div class="grid-example container">
    <div class="row no-gutters">
        <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8
        </div>
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
</div>

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

<div class="grid-example">
    <div class="container">
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col-6">
                2 of 3 (.col-6)
            </div>
            <div class="col">
                3 of 3
            </div>
        </div>
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col-5">
                2 of 3 (.col-5)
            </div>
            <div class="col">
                3 of 3
            </div>
        </div>
    </div>
</div>

Individuel kolonnebredde efter indhold

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

<div class="grid-example">
    <div class="container">
        <div class="row justify-content-md-center mb-2">
            <div class="col col-md-2">
                1 of 3
            </div>
            <div class="col-md-auto">
                Kolonne med variabel bredde
            </div>
            <div class="col col-md-2">
                3 of 3
            </div>
        </div>
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col-md-auto">
                Kolonne med variabel bredde
            </div>
            <div class="col col-md-2">
                3 of 3
            </div>
        </div>
    </div>
</div>

Rækkefølge

Order-klasser

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

<div class="grid-example">
    <div class="container">
        <div class="row">
            <div class="col">
                Første kolonne, men ingen order-klasse
            </div>
            <div class="col order-12">
                Anden kolonne, men vises som sidste kolonne
            </div>
            <div class="col order-1">
                Tredje kolonne, men vises som anden kolonne
            </div>
        </div>
    </div>
</div>

Forskyd kolonner

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

<div class="grid-example">
    <div class="container">
        <div class="row mb-2 grid-example-measure-row">
            <div class="col-1">
                <div class="align-text-center px-2">1</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">2</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">3</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">4</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">5</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">6</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">7</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">8</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">9</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">10</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">11</div>
            </div>
            <div class="col-1 ">
                <div class="align-text-center px-2">12</div>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
        </div>
        <div class="row mb-2">
            <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
            <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
        </div>
    </div>
</div>

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

<div class="grid-example">
    <div class="container">
        <div class="row mb-2">
            <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
            <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">
                .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
        </div>

        <div class="row">
            <div class="col-sm-6 col-md-5 col-lg-6">
                .col.col-sm-6.col-md-5.col-lg-6</div>
            <div
                class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">
                .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
            </div>
        </div>
    </div>
</div>

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

<div class="grid-example v-align">
    <div class="container">
        <div class="row align-items-start mb-2 grid-example-row-flex">
            <div class="col">
                One of three columns
            </div>
            <div class="col">
                One of three columns
            </div>
            <div class="col">
                One of three columns
            </div>
        </div>
        <div class="row align-items-center mb-2 grid-example-row-flex">
            <div class="col">
                One of three columns
            </div>
            <div class="col">
                One of three columns
            </div>
            <div class="col">
                One of three columns
            </div>
        </div>
        <div class="row align-items-end grid-example-row-flex">
            <div class="col">
                One of three columns
            </div>
            <div class="col">
                One of three columns
            </div>
            <div class="col">
                One of three columns
            </div>
        </div>
    </div>
</div>

<div class="grid-example v-align">
    <div class="container">
        <div class="row mb-2 grid-example-row-flex">
            <div class="col align-self-start">
                One of three columns
            </div>
            <div class="col align-self-center">
                One of three columns
            </div>
            <div class="col align-self-end">
                One of three columns
            </div>
        </div>
    </div>
</div>

Horisontal alignment

<div class="grid-example">
    <div class="container">
        <div class="row justify-content-start mb-2">
            <div class="col-4">
                One of two columns
            </div>
            <div class="col-4">
                One of two columns
            </div>
        </div>
        <div class="row justify-content-center mb-2">
            <div class="col-4">
                One of two columns
            </div>
            <div class="col-4">
                One of two columns
            </div>
        </div>
        <div class="row justify-content-end mb-2">
            <div class="col-4">
                One of two columns
            </div>
            <div class="col-4">
                One of two columns
            </div>
        </div>
        <div class="row justify-content-around mb-2">
            <div class="col-4">
                One of two columns
            </div>
            <div class="col-4">
                One of two columns
            </div>
        </div>
        <div class="row justify-content-between">
            <div class="col-4">
                One of two columns
            </div>
            <div class="col-4">
                One of two columns
            </div>
        </div>
    </div>
</div>

Hjælpeklasser: Margin

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

<div class="grid-example">
    <div class="container">
        <div class="row mb-2">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
        </div>
        <div class="row mb-2">
            <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
            <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
        </div>
        <div class="row">
            <div class="col-auto mr-auto">.col-auto .mr-auto</div>
            <div class="col-auto">.col-auto</div>
        </div>
    </div>
</div>

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