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 Rezepte
Robustes Bash-Grundgerüst mit set -euo pipefail
Ein Shell-Skript, das bei Fehlern einfach weiterläuft, ist gefährlich. Mit set -euo pipefail und einem sauberen Grundgerüst bricht dein Skript beim ersten Problem sicher ab.
Upsert in SQLite mit ON CONFLICT DO UPDATE
Einfügen oder aktualisieren in einem einzigen Statement – mit ON CONFLICT ... DO UPDATE. Kein vorheriges SELECT, kein Race Condition zwischen Prüfen und Schreiben.
fetch() mit async/await und sauberem try/catch
Daten von einer API holen ist mit fetch() und async/await lesbar wie synchroner Code. Der Haken: fetch wirft bei 404 oder 500 keinen Fehler – du musst response.ok selbst prüfen.