§ 06
Hvor mange kolonner får jeg automatisk, og hvor brede bliver de så reelt?
Odpowiedź: 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 | Znaczenie | Jednostka |
|---|---|---|
| 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 |
Nie dotyczy, gdy
Wstawiono domyślne wartości kalkulatora. Liczby obliczono dokładnie tym wzorem, którego używa narzędzie.
Wstawiono
Dawca
Tylko dla członków
Utwórz bezpłatne konto, aby odblokować wszystkie artykuły, kalkulatory, szablony i asortyment — i uzyskać dostęp do quizów i klas. Zajmuje to poniżej minuty: imię, email i hasło. Żadna karta kredytowa.
Chcesz najpierw czegoś spróbować? Zobacz, czego możesz używać bez konta — strefa junior, leksykon, filmy i więcej.
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.
To znaczy: Det bliver til 4 kolumn, 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.
To znaczy: 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.
To znaczy: Galleriet får 6 kolumn, 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.