Responsives Karten-Grid ganz ohne Media Queries
Mit repeat(auto-fill, minmax()) baust du ein Grid, das die Spaltenzahl selbst an die Breite anpasst. Ein einziger Deklarationsblock ersetzt einen Stapel Media Queries.
Ein Karten-Raster, das auf dem Handy einspaltig und auf dem Desktop mehrspaltig ist – dafür brauchst du heute keine Media Queries mehr. Die Kombination repeat(auto-fill, minmax(...)) lässt CSS die Spaltenzahl selbst ausrechnen.
Das Grid
.karten {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.5rem;
}Das liest sich so: „Fülle die Zeile mit so vielen Spalten, wie hineinpassen. Jede Spalte ist mindestens 260px breit und höchstens 1fr (ein gleicher Anteil des freien Platzes)." Wird das Fenster schmaler, fallen Spalten automatisch in die nächste Zeile.
Das HTML dazu
<div class="karten">
<article class="karte">Karte 1</article>
<article class="karte">Karte 2</article>
<article class="karte">Karte 3</article>
<article class="karte">Karte 4</article>
</div>auto-fill oder auto-fit?
Der feine, aber wichtige Unterschied: auto-fill behält leere Spalten bei, wenn Platz frei ist – die Karten bleiben links in ihrer Breite. auto-fit lässt vorhandene Karten den freien Platz aufteilen und in die Breite wachsen. Für ein Karten-Layout nehme ich meist auto-fill, wenn die Kartenbreite stabil bleiben soll, und auto-fit, wenn die Karten den Raum füllen dürfen.
Ein Tipp aus der Praxis: Auf sehr schmalen Handys kann 260px zu breit sein und einen horizontalen Scrollbalken erzeugen. Dann hilft minmax(min(260px, 100%), 1fr).
Solche modernen, wartungsarmen Layouts baue ich für jede Kundenwebsite. Wenn du eine Seite brauchst, die auf jedem Gerät gut aussieht, schau auf bymw.de.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
:is() und :where() – kürzere Selektoren, und einer davon wiegt nichts
Drei fast gleiche Selektoren untereinander, nur weil die Überschrift mal h2 und mal h3 heißt? :is() fasst das zusammen. Und :where() macht dasselbe, ohne die Spezifität hochzutreiben – der Unterschied ist der ganze Trick.
content-visibility – lange Seiten rendern, ohne dass der Browser alles auf einmal baut
Bei sehr langen Seiten rechnet der Browser Layout und Malen für jeden Abschnitt – auch für die, die 8.000 Pixel weiter unten liegen. Eine CSS-Eigenschaft verschiebt diese Arbeit auf den Moment, in dem sie gebraucht wird.
color-mix() – Hover- und Dark-Mode-Farben ausrechnen lassen, statt sie zu pflegen
Für jede Markenfarbe eine hellere, eine dunklere und eine transparente Variante von Hand zu pflegen, ist Fleißarbeit mit Fehlerquote. color-mix() mischt sie im Browser – aus genau einer Quellfarbe.