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.
Advarsel: Følgende øvelser virker pt. ikke optimalt i Firefox.
Lav et grid bestående af to kolonner med ens bredde og lidt mellemrum imellem. .box-1 skal strække sig over begge kolonner.
Indstil derefter .box-1 til en grid-container og lad den arve kolonne-definitionerne fra .container vha. grid-template-columns: subgrid.
grid-template-columns grid-column subgrid 
Lav to kolonner af ens bredde og to rækker af auto. Lav derefter .box til en grid-container, og lad den arve række-definitionerne fra .container ved at anvende grid-template-rows: subgrid.
Lad hver boks (.box) spænde over begge rækker vha. grid-row.
OBS! Fordi vi implicit indstiller to rækker i .box vha. grid-row, kan du fjerne grid-template-rows fra .container og stadig få samme resultat.
grid-template-rows grid-row subgrid 
Nested, parent, child, grid-template-areas, grid-template-rows.
Subgrid is awesome.
Lav fire kolonner, der veksler mellem størrelserne auto og 1fr vha. repeat(2, auto 1fr), og sørg for et mellemrum på 1rem.
.box-1 skal strække sig over begge rækker og .box-5 skal strække sig fra den anden kolonne til den allersidste. .box-5 skal arve kolonnerne fra .container vha. subgrid.
Sørg for at .box-5 arver mellemrummet (gap) fra .container ved at anvende gap: inherit.
grid-template-columns subgrid inherit 
Lav et grid med fire kolonner, hver med en bredde på 1fr. Sæt også et gap på 1rem.
Både .box-2 og .box-2b skal strække sig fra den anden kolonne til den sidste kolonne og placeres på række to. Begge skal arve gap fra .container ved hjælp af gap: inherit og skal indstilles som grid-containere, der arver kolonnerne fra .container ved hjælp af subgrid.
grid-template-columns subgrid inherit 
Lav .box til en grid-container med to kolonner (auto 1fr). Mellem kolonnerne skal der være et mellemrum på 1rem.
Alle .child-elementer skal strække sig fra første til sidste kolonne. .child-elementerne skal også indstilles som grid-containere og arve kolonnerne fra .box vha. subgrid.
.box-1 og .box-2b er placeret på kolonnelinje nummer 3 i hovedgrid’et. Tællemåden i subgrid’et er asynkron med hovedgrid’et, fordi .box-2b’s parent spænder fra kolonnelinje 2 / -1. For at omgå dette og skabe en ensartet reference, kan vi navngive linjerne. Dette gøres ved at sætte navnet i kantede parenteser, f.eks. [a] 1fr [b] 1fr, i grid-template-columns-definitionen (første linje har nu navnet a osv.).
Navngiv kolonnelinjerne [a], [b], [c], [d], [e] og ændr værdien af grid-column for både .box-1 og .box-2b til c.
grid-template-columns [a] 1fr [b] 1fr [c] 