Skip to content

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.

The result is indicative and an aid tool for estimates and learning. It does not replace design, applicable standards and legislation or a qualified professional's specific assessment. Always check against the source (Geometri / CSS Grid Layout-teknik (auto-fill + minmax, W3C-specifikation)) and actual conditions on the task. See sources & reservations.