§ 06
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.
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 |
Gælder ikke når
Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.
Sat ind
Giver
Kun for medlemmer
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.
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.
Det betyder: Det bliver til 4 kolonner, 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.
Det betyder: 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.
Det betyder: Galleriet får 6 kolonner, 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.