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
Fluid Typography mit CSS clamp() – Schrift, die ohne Media Queries mitwächst
Statt an drei Breakpoints feste Schriftgrößen zu setzen, lässt du sie mit clamp() flüssig zwischen einem Minimum und Maximum skalieren. Eine Zeile CSS ersetzt einen Stapel Media Queries.
Der Eltern-Selektor ist da – bedingtes Styling mit CSS :has()
Jahrelang gab es in CSS keinen Weg, ein Element abhängig von seinem Inhalt zu stylen. Mit :has() geht das endlich – ganz ohne JavaScript. Drei Beispiele, die ich ständig brauche.
Modifier-Reihenfolge in Compose – warum padding vor background alles ändert
In Jetpack Compose ist die Reihenfolge der Modifier keine Kosmetik, sondern Logik. background vor padding färbt auch den Rand ein, padding vor background nicht. Ein Beispiel, das den Groschen fallen lässt.