§ 06
CSS Grid — number of columns (auto-fill/minmax)
Hvor mange kolonner får jeg automatisk, og hvor brede bliver de så reelt?
Answer: 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.
Formula
antal kolonner = ⌊(container-bredde + gap) ÷ (min-elementbredde + gap)⌋
elementbredde = (container-bredde − (antal kolonner − 1) × gap) ÷ antal kolonner
| Symbol | Meaning | Unit |
|---|---|---|
| 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
- Source
- 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.
Worked example
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
Members only
The calculator itself is locked
Create a free user account to unlock all articles, calculators, templates and range — and get access to quizzes and classes. It takes less than a minute: name, email and a password. No payment card.
Want to try something first? See what you can use without an account — the junior zone, the encyclopedia, the videos and more.