§ 06
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.
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 |
Does not apply when
The calculator's own default values inserted. The figures are calculated with exactly the formula the tool uses.
Substituted
Giver
Members only
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.
Med grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) laver browseren selv kolonnerne. Beregneren viser, hvor mange kolonner der bliver og hvor brede kortene ender, så du kan vælge minimumsbredde og gap, der passer til designet ved de vigtige skærmbredder.
En webshop har en container på 1200 px, kortene skal være mindst 280 px, og gap er 24 px.
It means: Det bliver til 4 columns, hver 282 px brede. Vil kunden have fem på en række, skal minimumsbredden ned under ca. 221 px.
På en iPhone er containeren 343 px (390 px minus 2 × 16 px padding), og gap er 16 px.
It means: Kortet fylder 343 px, altså hele bredden, for der er kun plads til én kolonne. Det er det ønskede på mobil, uden en eneste media query.
Et fotogalleri står i en container på 1440 px med minimum 220 px og gap 20 px.
It means: Galleriet får 6 columns, hver 223 px brede. Det er tæt på minimum, så billederne bliver ikke beskåret meget.
Antal kolonner ≈ containerbredde ÷ (minimum + gap), rundet ned.
Antal kolonner × kortbredde + (antal − 1) × gap skal give containerens bredde.