Lav et grid med tre kolonner, som er lige brede vha. grid-template-columns og fr-enheder. Tilføj lidt mellemrum vha. gap: 10px.
Hints
-
display -
grid-template-columns -
gap
-
grid -
1fr
Simpelt grid 1 / 17
.box-1
.box-2
.box-3
.box-4
.box-5
.box-6
.box-7
.box-8
.box-9
Fleksibelt grid 2 / 17
Lav et grid med tre kolonner, hvor den midterste kolonne sættes til auto, og den første og sidste kolonne fylder resten af den tilgængelige plads (1fr).
Bemærk, at den midterste kolonne kun bliver så bred som dens tekstindhold.
Hints
-
grid-template-columns
-
1fr -
auto
.box-1
.box-2
.box-3
.box-4
.box-5
.box-6
.box-7
.box-8
.box-9
Placér boks i grid 3 / 17
Lav et grid med tre lige brede kolonner og sæt rækkehøjden til 50px med grid-auto-rows. .box-2 skal spænde over to rækker og to kolonner, startende i række 2, kolonne 2.
Hints
-
grid-auto-rows -
grid-column -
grid-row
-
span <n>
.box-1
.box-2
.box-3
.box-4
.box-5
.box-6
.box-7
.box-8
.box-9
Flag med grid 4 / 17
Sæt .container til height: 250px. Lav to kolonner, 1fr 1.5fr, og tilføj mellemrum med gap. Tilføj tre bokse, og se hvordan boksene danner et flag.
Hints
-
height -
gap
Mosaik-grid 5 / 17
Lav fire lige brede kolonner med repeat(4, 1fr). 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 lidt mellemrum med gap.
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.
Hints
-
grid-column -
grid-row -
gap
-
repeat(<n>, <x>)
Overlap bokse 6 / 17
Lav fire lige brede kolonner, og sæt rækkehøjden til 50px med grid-auto-rows. Lad hver boks spænde over 2 rækker og 2 kolonner, og placér dem, så de overlapper (se reference). Brug linjenumre, 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.
Hints
-
grid-column -
grid-row -
gap
Flydende layout 7 / 17
Lav tre kolonner, hvor den første og sidste optager lige meget plads med 1fr. Den midterste skal være minmax(0, 300px). .box-1 skal begynde på kolonne-linje 1 og slutte på kolonne-linje 4, og .box-2 skal begynde på kolonne-linje 2 og slutte på kolonne-linje 3.
Træk i vinduet med dine bokse (nederst i højre hjørne ) og bemærk, at .box-2 er 300px bred, indtil der ikke er plads nok – derefter følger den containerens bredde (se reference)
Hints
-
grid-template-columns
-
minmax(<min>, <max>)
.box-1
.box-2
Centrér boks i container 8 / 17
Gør .container til en grid-container, og brug derefter place-content til at placere .box-1 i midten af containeren.
Placér derefter .box-1 forskellige steder i containeren vha. start, end og stretch.
place-content kan håndtere to værdier.
Hints
-
place-content
-
center
.box-1
Placér boksen 9 / 17
Gør .container til en grid-container og lav to lige brede kolonner. Brug derefter place-self til at placere .box-2 i midten på den lodrette akse og i starten af den vandrette akse.
place-self kan håndtere to værdier (den lodrette akse og den vandrette akse).
Hints
-
place-self
-
center -
start
.box-1
.box-2
Placér bokse i grid-celle 10 / 17
Gør .container til en grid-container. Sørg for, at alle bokse ligger i den samme grid-celle ved at give .box (alle bokse) grid-column: 1 og grid-row: 1. Brug place-self til at placere boksene i hvert hjørne af containeren. Start med .box-5.
place-self kan have to værdier.
Hints
-
place-self
-
center -
start -
end
.box-1
.box-2
.box-3
.box-4
.box-5
Placér bokse 11 / 17
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).
Hints
-
grid-template-rows -
place-self
.box-1
.box-2
.box-3
Header, Main og Footer 12 / 17
Lav et grid med tre rækker til <header>, <main> og <footer>.
main skal være den fleksible række, så den kan vokse med indholdet, og højden på header og footer skal tilpasse sig deres indhold.
Træk derefter i vinduet med dine bokse (nederst i højre hjørne ) og bemærk, at header og footer altid er placeret hhv. øverst og nederst i grid’et.
(NB! I et rigtigt projekt, kræver det typisk min-height: 100svh på body).
Hints
-
grid-template-rows
-
auto
Header
Main
Footer
Fyld kolonnerne først 13 / 17
Lav et grid med tre rækker, og lad .box-1 spænde over alle tre. Brug grid-auto-flow, så de andre bokse automatisk placeres i nye kolonner.
Hints
-
grid-auto-flow
.box-1
.box-2
.box-3
.box-4
.box-5
.box-6
.box-7
Centreret indhold 14 / 17
Lav 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.
Hints
-
grid-row-start -
grid-row-end -
align-content
-
span 2
.box-1
.box-2
.box-3
Auto-fit / Auto-fill 15 / 17
Brug repeat() med auto-fit eller auto-fill, så grid’et selv afgør hvor mange kolonner, der kan være. Brug minmax(80px, 1fr), så hver kolonne mindst er 80px bred og ellers kan vokse.
Prøv både auto-fit og auto-fill og se forskellen i, hvordan den ekstra plads fordeles. De styrer, hvordan den overskydende plads skal allokeres i en grid-container. Hvis man bruger auto-fit vil boksene udvides, så de fylder hele containeren. Hvis man bruger auto-fill vil containeren allokere det overskydende rum i form af tomme celler, som ikke indeholder bokse.
Hints
-
repeat() -
minmax() -
auto-fit -
auto-fill
Navngiv Grid-linjer 16 / 17
Tilføj linjenavne til grid-template-columns, så boksene kan placeres med grid-column: a, b og c.
Brug navnene [a-start] og [a-end], [b-start] og [b-end] samt [c-start] og [c-end] til at angive, hvor hver kolonne begynder og slutter ved at placere dem før og efter de relevante kolonner. Bemærk, at når du tilføjer -start og -end til linjenavne, bliver der automatisk oprettet et navngivet område baseret på det navn, du har valgt.
Se referencen ift., hvordan linjenavnene skal placeres for at opnå den ønskede placering af boksene i grid’et.
Hints
-
[a-start] 2fr -
2fr [a-end]
.box-1
.box-2
.box-3
.box-4
.box-5
Bento-grid 17 / 17
Tilføj grid-template-areas, så boksene placeres som i referencen.
Brug områderne a, b, c, d og e til at angive, hvor hvert område skal være i grid’et. Nogle af områderne skal strække sig over flere kolonner, så husk at gentage det samme områdenavn, hvor det er nødvendigt.
Se referencen ift., hvordan områderne skal placeres for at opnå det ønskede layout af boksene i grid’et.
Hints
-
grid-template-areas
-
"a a b b" "c d d d"
.box-1
.box-2
.box-3
.box-4
.box-5