Es ist schon einige Jahr her, da hat CSS Spalten gleicher Höhe zu einen Heiligen Gral gemacht. Heute haben wir CSS flex und CSS grid und das Problem hat sich erledigt. Die neue Herausforderung sind Spalten mit Zeilen gleicher Höhe, z.B., um einen Vergleich zu präsentieren oder für die Kurzfassung von Blogbeiträgen.
Die Sache mit den Spalten hat uns der Gutenberg-Editor leicht gemacht. Was dabei allerdings nicht out-of-the-box geliefert wird, sind Zeilen gleicher Höhe innerhalb der Spalten (wie einst HTML-Tabellen).
display-flex: letzte Zeile nach unten
Die letzte Zeile in einer Spalte soll immer am unteren Rand der Spalten sitzen?
Dolores lumpis rosaroti coloris mele antu. Nitti britti rosendum polis.
Lorentii causa moris stinchi, ancor dornus mele picks. Sono sentis chemisette kroki distelum blaulicht anisette krospi.
No heilst blurri.
Das ist einfach: eine CSS-Klasse für die letzte Zeile
.line-bottom {
margin-top: auto;
}
Header gleicher Höhe
Eine simple Lösung, alle Kopfzeilen eines Spaltenblocks auf dieselbe Höhe zu setzen, ist eine Kürzung der Zeile mit text-overflow: ellipsis. So bleibt der volle Text im HTML-Markup erhalten und kann sich bei beim größeren Platzangebot wieder ausbreiten.
Aber natürlich ist gerade der Headertext besonders wichtig.
Kurzer Header
120 P
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec eros a ante mollis egestas eu in risus.
Langer Header mit zweiter Zeile
170 P
nur heute
bis Mitternacht
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis pulvinar iaculis tempus. Maecenas scelerisque sit amet est non finibus. Duis imperdiet sem eu venenatis pretium. Morbi laoreet rutrum tempus.
Column zu Column
Von Haus aus liefert Gutenberg das CSS für die Spalten als display:flex mit flex-basis und flex-grow.
@media (min-width: 782px), all
.wp-block-column {
flex-basis: 0;
flex-grow: 1;
display: flex;
flex-direction:column;
}
Die Spalten werden ebenfalls mit display:flex ausgestattet, die Richtung der Spalten innerhalb von wp-block-column mit flex-direction: column.
Jetzt ist also jede Gutenberg-Spalte eine spaltenorientierte Flexbox. CSS flex (Kurzschrift für flex-grow, flex-shrink, flex-basis) zieht die Zeilen der Spalten auf die jeweils selbe Höhe. Dafür bekommt jede Zeile eine CSS-Klasse unter Erweitert: cheader, cimage, cprice, ctext.
@media (min-width: 600px) {
.cheader {
flex: 1 1 10%
}
.cimage {
flex: 1 1 30%;
}
.cprice {
flex: 1 1 10%;
}
.ctext {
flex: 1 1 15%;
}
}
Die Werte für flex-grow, flex-shrink und flex-basis halten Variationen aus, wenn auch in Grenzen. Auf jeden Fall sind sie also keine allgemeine Einstellung, sondern müssen an die eigenen Inhalte angepasst werden.
CSS Breite von Elementen und Höhe von Elementen
Bei spaltenorientierten Blöcken mit flex-wrap: wrap brechen Blöcke um, sobald die Elemente breiter als der Inhalt sind. Zeilenorientiere Blöcke hingegen brauchen eine ausdrückliche Angabe der Höhe, damit flex-basis in Kraft tritt.
Jeder Spaltenblock bekommt also eine eigene CSS-Klasse mirror, der eine Höhe zugewiesen wird.
.wp-block-columns.mirror .wp-block-column{
max-height: 640px;
}
Bilder in Spalten begrenzen
Das Bild nimmt weiterhin seine volle Höhe entsprechend max-width:100%, height:auto ein. Höhe auf flex-basis begrenzen funktioniert mit CSS overflow.
.cimage {
flex: 1 1 30%;
overflow: hidden;
display: flex;
align-items: center;
}
Dann zeigen Bilder nur ihren Anfang. Um Bilder vertikal zu zentrieren, spring wieder display: flex ein.
flex-grow und flex-shrink
Wenn per flex-basis wie hier nur 70% des Platzangebots verteilt sind, bleiben 30% zur freien Verfügung, die mit flex-grow und flex-shrink verteilt werden können.
Im zweiten Beispiel haben die Bilder unterschiedliche Seitenverhältnisse. Damit sie in der Darstellung trotzdem auf dieselbe Höhe kommen, muss das Gutenberg-CSS weiter überschrieben werden.
.cimage {
flex:1 1 30%;
display:flex;
flex-direction: column;
overflow:hidden;
justify-content:center;
}
Spalte 1
Bilder mit unterschiedlichen Seitenverhältnissen
Spalte 2
Bilder einpassen
Spalten-Blöcke mit CSS grid
Das ist die Alternative zu CSS flex. Das Gutenberg-CSS für Columns wird von display-flex zu display-grid überschrieben.
.wp-block-columns {
display: grid;
grid-template-columns: 8fr 1fr 8fr;
}
Jede Spalte wird zu einem Grid:
.wp-block-column {
display: grid;
grid-template-rows: 20% 30% 20% 30%
}
Mehr zur Zeilen und Spalten im Layout von Webseiten
- HTML Tabellen – das Table-Tag mit Zeilen und Spalten – ist für das Layout von Webseiten schon lange nicht mehr brauchbar. Für Kalender, tabellarische Daten wie der Punktestand bei Spielen sind sie immer noch die erste Wahl.
- HTML dl – die Definitionsliste – setzt einen Begriff anstelle eines einfachen Listenpunkts.