Responsive Karten-Grids mit CSS Grid
Baue ein Karten-Layout, das sich ohne einen einzigen Breakpoint an jeden Bildschirm anpasst, und richte die Inhalte aller Karten mit Subgrid aneinander aus.
Quest-Ziele
- Ein responsives Grid mit auto-fit und minmax() erstellen
- Den Unterschied zwischen auto-fit und auto-fill verstehen
- Eine Karte über mehrere Spalten ziehen
- Das Innere aller Karten mit Subgrid ausrichten
Karten-Grids sind überall: in Shops, Blogs und Levelauswahl-Bildschirmen. Früher brauchte man dafür einen Berg von Media Queries. Mit modernem CSS Grid erledigt eine einzige Zeile fast alles.
Das Markup
Eine Liste ist hier das richtige Element, denn Screenreader sagen dann an, wie viele Karten es gibt:
<ul class="cards">
<li class="card">
<h2>Forest of Whispers</h2>
<p>A short description of this level.</p>
<a href="/levels/forest">Play</a>
</li>
<!-- More cards -->
</ul>Eine Zeile für das ganze Layout
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 1.5rem;
padding: 0;
list-style: none;
}Die Zeile mit grid-template-columns erledigt die ganze Arbeit. Lies sie von innen nach außen:
min(16rem, 100%)ist die kleinste Breite, die eine Karte haben darf. Dasmin()verhindert, dass eine Karte auf Bildschirmen schmaler als 16rem überläuft.minmax(..., 1fr)lässt jede Spalte von diesem Minimum bis zu einem gleich großen Anteil am freien Platz wachsen.repeat(auto-fit, ...)bringt so viele Spalten unter, wie Platz da ist.
Verändere die Größe deines Browserfensters, und die Spalten brechen von selbst um. Das geht ganz ohne Media Query, und das Grid richtet sich sogar nach der Breite seines Containers statt nach dem Bildschirm. Es funktioniert also auch in einer Sidebar.
Eine hervorgehobene Karte
Damit eine Karte auffällt, lässt du sie über zwei Spalten laufen. Die Media Query ist hier noch sinnvoll: Auf einem schmalen Bildschirm gibt es nur eine Spalte, und zwei Spalten zu überspannen würde eine zusätzliche erzeugen und zum Überlauf führen.
@media (min-width: 40rem) {
.card--featured {
grid-column: span 2;
}
}Karten mit Subgrid ausrichten
Vielleicht kennst du dieses Problem: Eine Karte hat einen langen Titel, deshalb sitzen Text und Button tiefer als bei den Nachbarn. subgrid löst das. Eine Karte kann die Zeilen des übergeordneten Grids übernehmen, sodass sich alle Titel, Texte und Buttons einer Reihe dieselben Linien teilen.
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
gap: 0.75rem;
padding: 1rem;
border-radius: 0.75rem;
background: #eef;
}
.card h2,
.card p {
margin: 0;
}grid-row: span 3 belegt drei Zeilen des übergeordneten Grids, je eine für den Titel, den Text und den Link. grid-template-rows: subgrid gibt diese Zeilen dann an die Kinder der Karte weiter. Jede Titelzeile wächst nun mit dem höchsten Titel ihrer Reihe.