Lav et grid med tre kolonner, som er lige brede vha. grid-template-columns og fr-enheder. Tilføj lidt mellemrum vha. gap: 10px.

Lav tre kolonner, hvor den midterste ikke må fylde mere end dens tekstindhold vha. auto (se reference). De to øvrige kolonner skal dele resten af den overskydende plads.

Lav tre lige brede kolonner, samt fire rækker, som hver er 50px (brug grid-auto-rows). .box-2 skal spænde over to rækker og to kolonner og begynde på række 2 i kolonne 2.

Giv .container en højde på 250px vha. height. Definér derefter to kolonner af 1fr 1.5fr og brug gap til at indstille mellemrum mellem boksene. Tilføj derefter tre bokse, og se hvordan boksene former et flag.

Lav fire lige brede kolonner som hver fylder lige meget (1fr) vha. repeat()-funktionen. Lad .box-1 spænde over 2 rækker og 2 kolonner, og lad .box-4 spænde over 2 rækker. Du kan evt. tilføje gap, for at lave mellemrum mellem boksene.

Tilføj derefter et par bokse for at se, hvordan disse lægger sig i grid’et. Træk i vinduet med dine bokse (nederst i højre hjørne ) for at se, hvordan boksene opfører sig i forskellige størrelser.

Lav fire lige brede kolonner samt fire rækker af 50px (brug grid-auto-rows). Hver boks skal spænde over to rækker og to kolonner og skal overlappe hinanden (se reference). Placér boksene vha. linjenumrene i dit grid; fx 1 / 3.

Tilføj derefter seks bokse for at se, hvordan disse lægger sig i grid’et. Du kan evt. indstille gap til 10px, for at lave mellemrum mellem boksene.

Gør .container til en grid-container, og brug derefter place-content til at placere .box-1 i midten containeren.

Placér derefter .box-1 forskellige steder i containeren vha. start, end og stretch.

place-content kan håndtere to værdier.

Gør .container til en grid-container og lav to kolonner, der er lige brede. Brug derefter place-self til at placere .box-2 hhv. i midten på den vertikale akse og i starten af den horisontale akse.

place-self kan håndtere to værdier (den vertikale akse og den horisontale akse).

Gør .container til en grid-container, og lad alle bokse dække samme grid-celle ved at sætte grid-column og grid-row til 1 på .box. Brug derefter place-self til at placere boksene i hvert hjørne af containeren. Begynd med .box-5.

place-self kan håndtere to værdier.

Definér et grid med tre rækker, der repræsenterer hhv. en <header>, <main> og <footer>.

main skal have en fleksibel højde, så den kan vokse med indholdet, og højden på header og footer skal defineres af indholdet vha. min-content.

Træk derefter i vinduet med dine bokse (nederst i højre hjørne ) for at se, hvordan header og footer altid er placeret hhv. øverst og nederst i grid’et.

(NB! I et rigtigt projekt, kræver effekten at body-elementet har en minimumshøjde på 100% af viewporten, fx min-height: 100svh).

Definér et grid med tre rækker og lad .box-1 spænde over alle tre. Brug derefter grid-auto-flow til at generere yderligere to kolonner med de resterende bokse.

Definér et grid med to kolonner, og sørg for, at alle bokse (.box) strækker sig over to rækker. .box-1 skal starte på række-linje 2 i grid’et.

Fordi vi ønsker at lade .box-1 starte på en bestemt position uden at ændre de andre bokses startpunkter, bruger vi grid-row-end: span 2. Dette sikrer, at hver boks strækker sig over to rækker fra sin naturlige startposition, mens .box-1 specifikt placeres i anden række ved hjælp af grid-row-start.

Husk også at sætte aspect-ratio til 3/2.

Når vinduet justeres i højden, skal indholdet altid være centreret i containeren ved hjælp af align-content.