CSS Grid – Spalten gleicher Höhe
Ein Layout-Raster wie in der Zeit der Tabellen-Layouts des Webdesigns steht immer noch auf dem Wunschzettel der meisten Webdesigner.
Die Spalten des Grids bleiben in derselben Höhe, egal, wie lang die Inhalte sind.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis tincidunt ultrices magna, at tempor nulla molestie sed. Vestibulum in ex non diam vulputate tempus in eu risus.
Duis lacinia tempor nulla in mollis.
Vivamus iaculis aliquet consequat.
Sed pharetra lacus et nisi scelerisque, vitae tempus nulla cursus. Aenean posuere ipsum eu massa ornare, a iaculis purus rutrum.
Pellentesque fringilla ac tellus nec scelerisque.
In tincidunt interdum arcu sed tincidunt.
Theoretisch würde eine einzige CSS-Regel helfen, um eine beliebige Zahl vom Spalten in gleicher Höhe zu setzen.
@media (min-width:720px) {
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: repeat(6, 1fr);
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-gap: 2vw;
}
}
display: contents für Grid-Blöcke
Bei dynamischen Inhalten – unterschiedlich langen Überschriften und wechselnden Textlängen – verschiebt sich das Raster. display: grid zwar Spalten auf dieselbe Höhe bringen, nicht aber die einzelnen Zeilen über alle Spalten. Dafür müssten alle Zellen als Grid-Elemente behandelt werden, also der umfassende Block jeder Grid-Spalte entfernt werden. Ein solcher Eingriff in die HTML-Struktur ist nicht immer machbar und auch nicht erwünscht.
display: contents kann die Elemente von Grid-Gruppen direkt als Elemente des Grid-Containers rendern, um allen Zeilen eines Grids dieselbe Höhe zu geben.
display:contents entfernt die Eigenschaften eines Blocks, so als wären öffnendes und schließendes HTML-Tag nicht mehr vorhanden, aber läßt die Inhalte intakt.
Grid: Letzte Zeile auf gleicher Höhe in allen Spalten
Ein zusätzliches display: flex mit flex-direction: column für jede Spalte des Grids kann die letzte Zeile in allen Spalte ins Register bringen.
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.
.block-column {
display: flex;
flex-direction: column;
}
.line-bottom {
margin-top: auto;
}
CSS subgrid
Die elegante Lösung hängt tief: CSS subgrid wird heute von allen modernen Browsern unterstützt.
Am Rande: IE 11
IE11 kannte weder auto placement noch grid-gap (bzw. gap in der neueren Schreibweise). Für den verlorenen Browser muss jede Zelle einzeln platziert werden. Ist bei sechs Boxen nicht die Welt, ist aber auch alles andere als flexibel. Wer's noch braucht:
CSS für IE11
@media (min-width: 720px) and (-ms-high-contrast:none) {
.option:nth-child(1) { -ms-grid-row:1; -ms-grid-column: 1; margin-right: 5px}
.option:nth-child(2) { -ms-grid-row:1; -ms-grid-column: 2; margin-right: 0}
.option:nth-child(3) { -ms-grid-row:2; -ms-grid-column: 1; margin-right: 5px}
.option:nth-child(4) { -ms-grid-row:2; -ms-grid-column: 2; margin-right: 0}
.option:nth-child(5) { -ms-grid-row:3; -ms-grid-column: 1; margin-right: 5px}
.option:nth-child(6) { -ms-grid-row:3; -ms-grid-column: 2; margin-right: 0}
}
@media (min-width: 1024px) and (-ms-high-contrast:none) {
.option:nth-child(1) { -ms-grid-row:1; -ms-grid-column: 1; margin-right: 1em}
.option:nth-child(2) { -ms-grid-row:1; -ms-grid-column: 2; margin-right: 1em}
.option:nth-child(3) { -ms-grid-row:1; -ms-grid-column: 3; margin-right: 0em}
.option:nth-child(4) { -ms-grid-row:2; -ms-grid-column: 1; margin-right: 1em}
.option:nth-child(5) { -ms-grid-row:2; -ms-grid-column: 2; margin-right: 1em}
.option:nth-child(6) { -ms-grid-row:2; -ms-grid-column: 3; margin-right: 0em}
}