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
Eksempel af grid
col
col
col
Vis HTML for eksempel af grid
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).
Eksempel af grid med alle breakpoints
1
2
3
4
5
6
7
8
9
10
11
12
col
col
col
col
col-8
col-4
Vis HTML for eksempel af grid med alle breakpoints
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.
Eksempel af grid med stablede kolonner til kolonner på række
col-md-8
col-md-4
col-md
col-md
col-md
Vis HTML for eksempel af grid med stablede kolonner til kolonner på række
Brug af forskellige kolonne-klasser
Du kan mikse forskellige kolonne-klasser.
Eksempel af grid med 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
Vis HTML for eksempel af grid med forskellige kolonne-klasser
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.
Eksempel af grid med kolonneombrydning
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
Vis HTML for eksempel af grid med kolonneombrydning
Indlejre
Du kan indlejre flere rækker med tilhørende kolonner i hinanden.
Eksempel af grid med indlejring af rækker med kolonner
Level 1: col-sm-9
Level 2: col-8 col-sm-6
Level 2: col-4 col-sm-6
Vis HTML for eksempel af grid med indlejring af rækker med kolonner
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.
Eksempel af grid med fast bredde på én kolonne
1 of 3
2 of 3 (col-6)
3 of 3
1 of 3
2 of 3 (col-5)
3 of 3
Vis HTML for eksempel af grid med fast bredde på én kolonne
Individuel kolonnebredde efter indhold
Ved at brug col-{breakpoint}-auto kan du skabe individuel kolonnebredde: Kolonnerne tilpasser sig til deres indhold.
Eksempel af grid med indholdsbestemt bredde på kolonner
1 of 3
2 of 3 (col-6)
3 of 3
1 of 3
2 of 3 (col-5)
3 of 3
Vis HTML for eksempel af grid med indholdsbestemt bredde på kolonner
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).
Eksempel af grid med ændring af rækkefølgen på kolonner
Første kolonne, men ingen order-klasse
Anden kolonne, men vises som sidste kolonne
Tredje kolonne, men vises som anden kolonne
Vis HTML for eksempel af grid med ændring af rækkefølgen på kolonner
Forskyd kolonner
Brug klasserne .offset- til at forskyde kolonner, fx forskyder .offset-md-4 4 kolonner til højre.
Eksempel af grid med forskydning af kolonner
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
Vis HTML for eksempel af grid med forskydning af kolonner
Du kan nulstille forskydning ved fx at bruge klassen offset-md-0.
Eksempel af grid med nulstilling af forskydning af kolonne