Spring til indhold

CSS Grid — antal kolonner (auto-fill/minmax)

Hvor mange kolonner får du automatisk med en given container-bredde og minimumsbredde pr. element?

Den udbredte responsive grid-teknik 'grid-template-columns: repeat(auto-fill, minmax(X, 1fr))' fylder rækken med så mange kolonner, som kan være der, uden at noget element bliver smallere end den angivne minimumsbredde. Beregneren viser, hvor mange kolonner det reelt bliver til ved en given container-bredde, minimumsbredde og mellemrum (gap), samt elementernes faktiske bredde, når pladsen fordeles ligeligt.

4kolonner
Elementernes faktiske bredde282 px
3D …

antal kolonner = ⌊(container-bredde + gap) ÷ (min-elementbredde + gap)⌋

elementbredde = (container-bredde − (antal kolonner − 1) × gap) ÷ antal kolonner

Modellen forudsætter, at grid'et bruger 'repeat(auto-fill, minmax(min, 1fr))' — andre grid-strategier (fx faste kolonneantal eller auto-fit) opfører sig lidt anderledes ved tomme kolonner.

Resultatet er vejledende og et hjælpeværktøj til overslag og læring. Det erstatter ikke projektering, gældende normer og lovgivning eller en autoriseret fagpersons konkrete vurdering. Kontrollér altid mod kilden (Geometri / CSS Grid Layout-teknik (auto-fill + minmax, W3C-specifikation)) og de faktiske forhold på opgaven. Se kilder & forbehold.