Lav tre kolonner, hvor den første og sidste kolonne optager lige meget plads vha. 1fr
. Angiv en rækkevidde mellem 0
(min) og 300px
(max) via funktionen minmax()
til den midterste kolonne. .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 ) for at se, hvordan grid’et opfører sig i forskellige størrelser. .box-2
skal forblive 300px
i bredden, indtil der ikke er mere plads, hvorefter den skal følge forælder-containerens bredde (se reference).
Hints
-
grid-template-columns
-
minmax(<min>, <max>)