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!
.container og de enkelte bokse.
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.
Lav et grid med tre kolonner og tre rækker (grid-template-rows). Den midterste kolonne skal være tre gange så bred som de øvrige med 3fr. Første og sidste række skal optage lige meget plads vha. 1fr, og den midterste række skal være auto. Tilføj derefter gap: 10px.
Lad img dække hele grid’et.
Placér .box-1 i den midterste celle. Placér .box-2 og .box-3 i hhv. første og sidste række, så de ligger tæt op ad .box-1 (se reference).
grid-template-rows place-self 
