Om øvelserne

Bliv fortrolig med CSS Grid, Flexbox og Subgrid gennem praktiske, interaktive opgaver.

Her kan du øve dine færdigheder i CSS Grid, Flexbox og Subgrid gennem praktiske, interaktive opgaver. Øvelserne dækker både de grundlæggende og de mere avancerede teknikker inden for moderne layout-metoder.

Du får mulighed for at arbejde med alt fra simple grid- og flex-strukturer til mere komplekse features som placering, auto-fit, navngivning af grid-linjer og Subgrid-nedarvning. Undervejs får du også indblik i, hvornår de forskellige teknikker er bedst at bruge, og hvordan de kan kombineres for at skabe fleksible, responsive layouts på tværs af flere niveauer.

Formålet er, at du gennem hands-on erfaring opnår en intuitiv forståelse af, hvordan man bygger moderne CSS-layouts. Du vælger selv, om du vil dykke ned i Grid, Flexbox, Subgrid – eller dem alle!

Sådan laver du en øvelse

  1. Læs opgavebeskrivelsen – den forklarer, hvad du skal opnå med CSS-koden.
  2. Brug tekstfeltet til at skrive eller tilrette CSS’en for .container og de enkelte bokse.
  3. Hvis du vil starte forfra med en opgave, så tryk ESC, mens du har markøren i tekstfeltet, hvorefter du skal bekræfte. Så nulstilles opgaven.
  4. Brug hints og referencelinks under hver opgave, hvis du går i stå.
  5. Når du ser ændringen ske i preview-området, ved du, at din kode virker!
  6. Eksperimentér gerne videre og se, hvordan ændringer påvirker layoutet.

Tip: Du kan bruge genveje som df eller dg, hvis du hurtigt vil skrive hhv. display: flex; og display: grid;. Du kan også klikke direkte på kode-eksemplerne i hints og i opgavebeskrivelserne, for at indsætte dem i tekstfeltet.

Elementer på række 1 / 12

Få boksene til at stå på række ved at ændre .container til en flex-container.

Hints
  • display
  • gap
  • flex
Har du brug for hjælp? Lær mere om flex-container
HTML
.box-1
.box-2
.box-3
.box-4
.box-5

Justér elementer 2 / 12

Få boksene til at stå på række, og fordel den overskydende plads i containren jævnt mellem dem med justify-content space-between.

Prøv derefter at ændre værdien til hhv. space-evenly, space-around, center og flex-end og bemærk, hvordan den ledige plads fordeles forskelligt.

Hints
  • justify-content
  • space-between
  • space-evenly
  • center
  • flex-end
Har du brug for hjælp? Lær mere om justify-content
HTML
.box-1
.box-2
.box-3
.box-4
.box-5

Skub med auto-margin 3 / 12

Adskil .logo fra de resterende bokse vha. auto-margin. Brug margin-right eller margin-inline-end med værdien auto for at bruge den overskydende plads i containeren til at skubbe de øvrige bokse mod højre.

Brug align-items center til at centrere boksene på containerens vertikale akse, så højden begrænses til boksenes reelle højde. Tilføj gap, for at garantere en minumumsafstand mellem boksene.

Hints
  • margin-right/margin-inline-end
  • align-items
  • auto
Har du brug for hjælp? Lær mere om auto-margin
HTML
.box-1
.box-2
.box-3
.box-4

Skift retning 4 / 12

Brug den overskydende plads i containeren til at skubbe de to bokse fra hinanden, ændr retningen (column) i containeren, så boksene placeres fra top mod bund vha. flex-direction.

Brug enten auto-margin på én af boksene eller justify-content på containeren for at placere boksene i top og bund.

Hints
  • flex-direction
  • column
Har du brug for hjælp? Lær mere om flex-direction
HTML
.box-1
.box-2

Modsat retning 5 / 12

Brug den overskydende plads i containeren til at skubbe de to bokse fra hinanden, ændr retningen (column-reverse) i containeren, så boksene placeres fra bund mod top vha. flex-direction. Læg mærke til rækkefølgen på boksene.

Brug enten auto-margin på én af boksene eller justify-content på containeren for at placere boksene i top og bund.

Hints
  • flex-direction
  • column-reverse
Har du brug for hjælp? Lær mere om column-reverse
HTML
.box-1
.box-2

Fyld containeren 6 / 12

Brug flex-grow på .box-1 for at få den til at optage den overskydende plads i containeren. Den anden boks bliver således skubbet ned i bunden af containeren. Ændr retningen i containeren, så boksene placeres fra top mod bund.

Træk vinduet større vha. for at se, hvordan .box-1 altid optager den overskydende plads i containeren.

Tilføj derefter flere bokse, for at se, hvordan den overskydende plads i containeren skrumper ind, som forårsager .box-1 til at blive mindre.

Hints
  • flex-grow
Har du brug for hjælp? Lær mere om flex-grow
HTML
.box-1
.box-2

Placér bokse 7 / 12

Brug align-self til at placere .box-1 og .box-3 i containeren. Lad .box-2 optage den resterende plads i containeren, så den skubber de øvrige bokse så små som muligt.

Træk i vinduet vha. for at se, hvordan boksene opfører sig i forskellige størrelser.

Hints
  • flex-grow
  • align-self
  • flex-start
  • flex-end
Har du brug for hjælp? Lær mere om align-self
HTML
.box-1
.box-2
.box-3

Klynge-wrap 8 / 12

Få hvert ord til at rykke ned på en ny række, hvis der ikke er plads nok på den nuværende, ved at sætte flex-wrap til wrap på .containeren.

Tilføj noget afstand mellem ordene ved at sætte gap til .5rem.

Hints
  • flex-wrap
  • wrap
Har du brug for hjælp? Lær mere om flex-wrap
HTML
Layout
CSS
Web Design
Code
Front-end
Development

Fyld rækkerne ud 9 / 12

Få boksene til at rykke ned på en ny række, hvis der ikke er plads nok ved at sætte flex-wrap til wrap på .containeren. Indstil derefter hver boks til minimum at fylde 30 % af containerens bredde vha. flex: 30%;. Dette sørger samtidigt for, at alle boksene udnytter hele den tilgængelige plads i containeren.

flex er en forkortelse for flex-grow, flex-shrink og flex-basis. Mens flex-grow: 1; udnytter ekstra plads i containeren ligeligt, fastsætter flex-basis boksenes ideelle bredde, og flex-shrink: 1; gør det muligt for boksene at skrumpe mindre end deres flex-basis værdi.

Bemærk, flex: 30%; er det samme som at skrive flex-grow: 1;, flex-shrink: 1; og flex-basis: 30%;.

Hints
  • flex-wrap
  • flex
  • wrap
Har du brug for hjælp? Lær mere om flex shorthand
HTML
.box-1
.box-2
.box-3
.box-4
.box-5
.box-6
.box-7
.box-8

Flex none 10 / 12

Lav en flex-container, der wrapper indholdet, når der ikke er plads (inkl. lidt gap).

Brug derefter flex shortands til hhv. at få .box-1 til kun være så bred som dens indhold vha. værdien none, mens .box-2 skal fylde 300px plus containerens eventuelle overskydende plads.

Træk i vinduet vha. for at se, hvordan boksene opfører sig i forskellige størrelser.

Hints
  • flex-wrap
  • flex
  • wrap
  • none
Har du brug for hjælp? Lær mere om flex shorthand
HTML
.box-1
.box-2

Wrap-reverse 11 / 12

Indstil boksene til hhv. at fylde 300px (.box-1) og 100px (.box-2) plus containerens eventuelle overskydende plads vha. flex.

Sæt derefter flex-wrap til wrap-reverse på .containeren for at få boksene til at wrappe i omvendt rækkefølge.

Hints
  • flex
  • flex-wrap
  • wrap-reverse
Har du brug for hjælp? Lær mere om wrap-reverse
HTML
.box-1
.box-2

Scrolling Container 12 / 12

Lav .containeren til en flex-container og sørg for at hver box fylder 65% af containerens bredde ved at indstille flex-basis: 65% på .box. Sørg også for, at alle boksene ikke kan skrumpe ved at sætte flex-shrink til 0.

Tilføj noget afstand mellem boksene ved at sætte gap til .5rem.

Hints
  • flex-shrink
  • flex-basis
Har du brug for hjælp? Lær mere om flex-basis
HTML
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9