CSS Spalten gleicher Höhe mit CSS Grid

CSS Grid: Spalten gleicher Höhe

Spalten gleicher Höhe waren immer ein Dauerbrenner des Webdesigns. display:flex war ein großer Schritt für das Spaltenlayout, und natürlich bringt auch display:grid Spalten auf dieselbe Höhe. Offen bleibt dennoch: gleiche Höhe für Grid-Zellen in allen Zeilen.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

Layout-Raster wie html table

Die Spalten des Grids bleiben in derselben Höhe, egal, wie lang die Inhalte sind.

GRID-CELL 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

GRID-CELL 2

Duis tincidunt ultrices magna, at tempor nulla molestie sed. Vestibulum in ex non diam vulputate tempus in eu risus.

GRID-CELL 3

Duis lacinia tempor nulla in mollis.

Vivamus iaculis aliquet consequat.

GRID-CELL 4

Sed pharetra lacus et nisi scelerisque, vitae tempus nulla cursus. Aenean posuere ipsum eu massa ornare, a iaculis purus rutrum.

GRID-CELL 5

Pellentesque fringilla ac tellus nec scelerisque.

GRID-CELL 6

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.

Bild in css columns / Spalten

Dolores lumpis rosaroti coloris mele antu. Nitti britti rosendum polis.

CSS columns / Spalten letzte Zeile

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 ist unterwegs. Bislang unterstützen nur Firefox und Safari diese CSS-Eigenschaft.

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}
}