CSSXS - Sda

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

Læs opgavebeskrivelsen – den forklarer, hvad du skal opnå med CSS-koden.
Brug tekstfeltet til at skrive eller tilrette CSS’en for .container og de enkelte bokse.
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.
Brug hints og referencelinks under hver opgave, hvis du går i stå.
Når du ser ændringen ske i preview-området, ved du, at din kode virker!
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.

Lad to bokse tone ind 5 / 11

Få boksene til at tone ind fra hver sin side, når de kommer ind i scrollporten. Lad .box-1 starte 2rem mod venstre med en rotation på -5deg, og .box-2 starte 2rem mod højre med en rotation på 5deg.

Udfyld @keyframes appear-1 og appear-2, og brug dem på hver sin boks. Knyt begge animationer til view(), afgræns dem til 0% 50%, og brug ease-out og both, så boksene ender fuldt synlige uden forskydning eller rotation.

Hints

animation
animation-timeline
animation-range
opacity
translate
rotate

view()
both

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 2rem;
}
.box {
  display: grid;
  place-items: center;
}
.box-1 {
  
}
.box-2 {
  
}
@keyframes appear-1 {
  from {
    
  }
}
@keyframes appear-2 {
  from {
    
  }
}

<div class="scrollport">	
	<div style="height:100%"></div>
	<div class="container">
	  <div class="box box-1">I'm a box</div>
	  <div class="box box-2">I'm a box</div>
	</div>
	<div style="height:100%"></div>
</div>

<div class="scrollport">	
	<div style="height:100%"></div>
	<div class="container">
	  <div class="box box-1">I'm a box</div>
	  <div class="box box-2">I'm a box</div>
	</div>
	<div style="height:100%"></div>
</div>

Har du brug for hjælp? Lær mere om view()

I'm a box