3. semester / Tema 13C: Frontend Design

Intrinsic sizing og automatiske kolonner

Lad indhold og tilgængelig plads styre størrelser, og sammenlign auto-fill med auto-fit.

Se undervisningsslides

Relevante links

Intrinsic sizing

Intrinsic sizing tager udgangspunkt i indholdets egen størrelse. Det er nyttigt, når fx en navigation skal have plads til sine links uden at få en fast bredde.

Værdi	Hvad styrer størrelsen?
`min-content`	Den mindste størrelse med alle almindelige linjeskift; et langt ubrudt ord kan stadig sætte en stor minimumsbredde.
`max-content`	Den størrelse indholdet ønsker uden almindelig tekstombrydning.
`fit-content`	En elementbredde, der tilpasser sig pladsen inden for indholdets min- og max-content-grænser.
`fit-content(20rem)`	Et gridspor med en angivet grænse; indholdets automatiske minimum kan stadig være større end grænsen.
`auto`	Et gridspor, hvis størrelse afhænger af indhold og de øvrige spor; det kan også strækkes af gridets alignment.

width: fit-content er et nøgleord på elementet. fit-content(20rem) er her en funktion i definitionen af et gridspor. De skrives derfor forskelligt.

main {
  display: grid;
  gap: 1rlh;
  grid-template-columns: fit-content(20rem) minmax(0, 1fr);
}

Prøv min-content, max-content, fit-content(20rem) og auto som første kolonne i øvelsen. Gør derefter menunavnene længere, og ændr bredden. Vær opmærksom på, om det er teksten, en grænse eller den ledige plads, der bestemmer kolonnens størrelse.

Auto-fill og auto-fit

repeat() kan oprette så mange kolonner, som der er plads til. minmax() beskriver den mindste og største sporstørrelse:

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rlh;
}

Begge varianter opretter automatisk kolonner ud fra pladsen, men de håndterer tomme spor forskelligt:

auto-fill bevarer de tomme spor, så der kan være plads til flere kort uden at de eksisterende kort strækkes ind i den plads.
auto-fit klapper tomme spor sammen. Med 1fr som maksimum kan de optagede spor derefter vokse og fylde pladsen.

Forskellen er derfor tydeligst, når der er mere plads end nødvendigt til de eksisterende kort. Gør previewet bredt, og skift mellem de to værdier. På smallere bredder kan resultatet se ens ud.

En fast minimumsbredde kan stadig give overflow på meget smalle containere; det arbejder du videre med i Math og layout.

Test dig selv.

Roles Section

Brug layoutmønstrene til at genskabe Roles Section. Vælg selv, hvor Grid, Flex eller normalt flow gør opgaven enklest. Sammenlign først struktur og afstande med referencen. Prøv derefter code-golfing-udfordringen: kan samme resultat beskrives med mindre CSS?

Genskab Profile Card ud fra referencen. Undersøg, hvilke dele der skal stå i samme række, hvilke der skal stables, og hvordan kortet bør reagere på længere indhold.