Intrinsic design: Indholdsstyret dimensionering

Indholdsdrevet layout, et begreb skabt af Jen Simmons, betyder, at indholdet selv bestemmer sin størrelse i stedet for at få pålagt faste pixelmål. CSS har nøgleord til intrinsisk størrelsesbestemmelse, som gør layouts naturligt responsive uden tilsidesættelser styret af brudpunkter.

min-content: den mindste størrelse, der kan rumme indholdet uden overløb (tekst ombrydes ved hver ordgrænse). max-content: den størrelse, der kræves for at vise indholdet på én linje uden ombrydning. Begge afspejler indholdets faktiske dimensioner.

fit-content svarer til min(max-content, max(min-content, available)). Det vokser med indholdet op til den tilgængelige plads og ombryder derefter teksten. Det er perfekt til knapper og etiketter, der skal være lige så brede som deres tekst, men ikke bredere end deres container.

minmax(min, max) i grid-template-columns angiver et spors minimums- og maksimumsstørrelse. minmax(200px, 1fr) opretter en kolonne, der er mindst 200px bred, men kan vokse. Kombineret med auto-fill skaber det intrinsisk responsive gitre.

Begge udfylder rækken med så mange spor som muligt. auto-fill bevarer tomme spor (og dermed antallet af kolonner). auto-fit skjuler tomme spor, så udfyldte spor udvides og fylder pladsen. Brug auto-fit til indholdsdrevne layouts, der skal udvide sig og fylde den tilgængelige bredde.

clamp(min, preferred, max) begrænser en værdi mellem angivne grænser. font-size: clamp(1rem, 2.5vw, 1.5rem) skalerer mellem 1rem og 1.5rem baseret på visningsområdets bredde — flydende typografi uden medieforespørgsler.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) opretter et responsivt gitter, der kun har én kolonne i meget smalle visningsområder og automatisk tilføjer kolonner, når pladsen tillader det. Ingen medieforespørgsler og ingen JavaScript.

aspect-ratio: 16/9 får et element til at bevare sine proportioner, når bredden ændres. Kombineret med width: 100% fylder en videokontainer sin overordnede container og bevarer altid formatet 16:9 uden JavaScript eller hacks med procentbaseret indvendig margen.

Indholdsdrevet layout passer godt sammen med CSS' logiske egenskaber (inline-size, block-size, margin-inline) til layouts, der fungerer både i vandrette og lodrette skrivetilstande. Intrinsisk størrelsesbestemmelse tilpasser sig automatisk skriveretningen.

Fast: width: 300px — altid 300px uanset indholdet. Indholdsdrevet: width: fit-content — lige så bredt som indholdet, op til de angivne begrænsninger. Faste layouts kræver brudpunkter for at tilpasse sig; indholdsdrevne layouts tilpasser sig selv efter deres indhold og kontekst.

Indholdsdrevet layout er mest effektivt, når indholdets størrelse varierer naturligt. Hvis du tvinger intrinsisk størrelsesbestemmelse igennem, selv om indholdet er kendt og ensartet, øger det kompleksiteten uden at give en fordel. Brug faste størrelser til fast brugerfladekrom (navigation, værktøjslinje) og intrinsisk størrelsesbestemmelse til indholdsområder.

Indholdsdrevet layout bruger CSS' størrelsesnøgleord (min-content, max-content, fit-content), minmax() sammen med auto-fit, clamp() til flydende skalering og aspect-ratio til at skabe layouts, der styres af indholdets dimensioner i stedet for brudpunkter for visningsområdet. Resultatet er naturligt responsive layouts med mindre CSS og færre medieforespørgsler.