§ 06
CSS Grid — antal kolonner (auto-fill/minmax)
Hvor mange kolonner får jeg automatisk, og hvor brede bliver de så reelt?
Svar: 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.
Formel
antal kolonner = ⌊(container-bredde + gap) ÷ (min-elementbredde + gap)⌋
elementbredde = (container-bredde − (antal kolonner − 1) × gap) ÷ antal kolonner
| Symbol | Betydning | Enhed |
|---|---|---|
| container_bredde_px | Containerens bredde | px |
| min_element_bredde_px | Minimumsbredde pr. element | px |
| mellemrum_px | Mellemrum mellem elementer (gap) | px |
| = | Antal kolonner | kolonner |
| = | Elementernes faktiske bredde | px |
Gyldighed og kilde
- Kilde
- Geometri / CSS Grid Layout-teknik (auto-fill + minmax, W3C-specifikation)
Gælder ikke når
- 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.
Regneeksempel
Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.
Sat ind
- Containerens bredde1.200 px
- Minimumsbredde pr. element280 px
- Mellemrum mellem elementer (gap)24 px
Giver
- Antal kolonner4 kolonner
- Elementernes faktiske bredde282 px
Kun for medlemmer
Selve beregneren er låst
Opret en gratis bruger for at låse op for alle artikler, beregnere, skabeloner og sortiment — og få adgang til quizzer og klasser. Det tager under et minut: navn, email og en adgangskode. Intet betalingskort.
Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.