CSS subgrid
Eine einfache Lösung für Zeilen gleicher Höhe in allen Spalten ist in den modernen Browsern angekommen: grid-template-rows: subgrid. grid-template-rows: subgrid synchronisiert Zeilenhöhen über mehrere Spalten und ermöglicht so verschachtelte Layouts mit konsistenter Zeilen- und Spaltenausrichtung.
<div class="card-container"> <div class="grid-card"> <span class="thumbnail"><img …></span> <div class="columnhead">Occelli Buttero</div> <p>Lobesam die Melonen milensis troppo verro. Ingelis itali logo knuprig.</p> <button class="btn">Lausch mettis</button> </div> <div class="grid-card"> <span class="thumbnail"><img …></span> <div class="columnhead">Hibiskus Mundi</div> <p>Anipasto grosso Mundo helbig hochizont labislis. Genug Hibiskus anti osso verdo lotesam sum nobility. Grosse Geschnack licki orangi buttoni assenten veggie. Salizg Erde krummo mit die kruste.</p> <button class="btn">Lausch mettis</button> </div> … </div>
Lobesam die Melonen milensis troppo verro. Ingelis itali logo knuprig.
Anipasto grosso Mundo helbig hochizont labislis. Genug Hibiskus anti osso verdo lotesam sum nobility. Grosse Geschnack licki orangi buttoni assenten veggie. Salizg Erde krummo mit die kruste.
Ameli con butto analogem: Nee bloß nicht. Turkisi pasto klickklcik hilft bunit bravi menti.
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-card {
display: grid;
grid-template-rows: subgrid; /* Erbt die Zeilenhöhen */
grid-row: span 4; /* Jede Karte erstreckt sich über 4 Zeilen */
border: 1px solid #ccc;
padding: 10px;
background: lightblue;
}
Ohne subgrid hätten Header, Bilder und Texte je nach Inhalt unterschiedliche Höhen. Mit subgrid hingegen sind alle Elemente innerhalb der Karten über alle Karten hinweg gleich hoch. Das ist besonders nützlich für Layouts mit gleichmäßigen Strukturen – z.B. Karten-Layouts, Blog-Beiträge oder Produktseiten.
Für die volle Kontrolle über die Höhe einzelner Elemente in einem Cards-Layout ist CSS Grid (mit grid-auto-flow: dense) am besten geeignet.
display: flex – Spalten gleicher Höhe mit Zellen auf gleicher Höhe
Aber auch display:flex hat eine Lösung bei der Hand.
Die Lösung für drei Spalten mit je drei Zeilen ist allerdings komplizierter als die modernste Variante – das Subgrid – und obendrein nicht so mächtig.
<div class="container">
<div class="flex-card">
<div class="card-content">
<h2>Karte 1</h2>
<p>Ein kurzer Text.</p>
</div>
<button class="btn card-footer">Mehr erfahren</button>
</div>
<div class="flex-card">
<div class="card-content">
<h2>Karte 2</h2>
<p>Dieser Text ist viel länger und sollte die Höhe aller drei Spalten – Karten – beeinflussen.</p>
</div>
<button class="btn card-footer">Mehr erfahren</button>
</div>
…
</div>
Ein kurzer Text.
Dieser Text ist viel länger und sollte die Höhe aller drei Spalten – Karten – beeinflussen.
Noch ein kurzer Text.
.container {
display: flex;
gap: 20px;
}
.flex-card {
flex: 1; /* Alle Cards gleich breit */
display: flex;
flex-direction: column; /* Elemente in der Card untereinander */
padding: 10px;
background: lightblue;
}
.card-content {
flex: 1; /* Dehnt sich gleichmäßig aus */
display: flex;
flex-direction: column;
align-items: stretch; /* Elemente innerhalb der Card gleich hoch */
}
Die wichtigsten Eigenschaften sind flex-direction: column für die drei Elemente jeder Spalte.
display:grid: Masonry-Layout
Bei einem Masonry-Layout stapeln sich die Elemente ähnlich wie Mauersteine (engl. "masonry") in ungleichmäßigen Reihen, sodass keine leeren Räume entstehen.
<div class="masonry-container"> <div class="masonry-item">1</div> <div class="masonry-item">2</div> <div class="masonry-item">3</div> <div class="masonry-item">4</div> <div class="masonry-item">5</div> <div class="masonry-item">6</div> </div>
.masonry-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-auto-rows: 10px;
gap: 10px;
}
.masonry-item {
background-color: lightblue;
padding: 10px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: white;
}
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) erstellt so viele 180px breite Spalten wie möglich.
| Wert | Verhalten |
|---|---|
| auto-fill | Erstellt so viele Spalten wie möglich, aber lässt freie Plätze, wenn nicht genug Inhalt da ist. |
| auto-fit | Passt die Spalten an, sodass keine freien Plätze entstehen – d. h. sie dehnen sich aus. |
Den Unterschied zwischen auto-fill und auto-fit erkannt man nur, wenn alle Masonry-Elemente in eine Zeile passen.
/* Unterschiedliche Höhen für das Masonry-Effekt */
.masonry-item:nth-child(1) { grid-row: span 10; }
.masonry-item:nth-child(2) { grid-row: span 5; }
.masonry-item:nth-child(3) { grid-row: span 15; }
…
Da ist nur ein einfacher Ansatz für ein Masonry-Layout. Soll das Layout dynamisch generiert werden, müssen Javascript oder/und eine Bibliothek wie Masonry.js erforderlich sein.
