§ 06
Hvor mange kolonner får jeg automatisk, og hvor brede bliver de så reelt?
Antwort: 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 | Bedeutung | Einheit |
|---|---|---|
| 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 |
Gilt nicht, wenn
Die eigenen Standardwerte des Rechners sind eingesetzt. Die Zahlen sind mit genau der Formel berechnet, die das Werkzeug verwendet.
Sat ind
Geber
Nur für Mitglieder
Lege einen kostenlosen Zugang an, um alle Artikel, Rechner, Vorlagen und das Sortiment freizuschalten — und Zugriff auf Quizze und Klassen zu erhalten. Es dauert unter einer Minute: Name, E-Mail und ein Passwort. Keine Zahlungskarte.
Willst du zuerst etwas ausprobieren? Sieh, was du ohne Konto nutzen kannst — der Junior-Bereich, das Lexikon, die Videos und mehr.
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.
Es bedeutet: Det bliver til 4 Spalten, 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.
Es bedeutet: 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.
Es bedeutet: Galleriet får 6 Spalten, 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.