CSS Spalten gleicher Höhe mit CSS Grid

CSS Grid: Spalten gleicher Höhe

Seit dem AUS für Layout-Tabellen sind Spalten gleicher Höhe 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 (auch in IE11, dem Sondermüll des Internets).

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

Für IE 11, der weder auto placement noch grid-gap (bzw. gap in der neueren Schreibweise) kennt, 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}
}

Spalten und Zeilen gleicher Höhe mit CSS Grid

Bei dynamischen Inhalten – unterschiedlich langen Überschriften und wechselnden Textlängen – verschiebt sich das Raster.

Am Ende kann display: grid zwar die Spalten auf dieselbe Höhe bringen, aber nur das letzte Element innerhalb der Spalten lässt sich durch umständliche Tricks nach ganz unten schieben.

Auf den Spalten liegt zusätzlich display: flex mit flex-direction: column. Die letzte Zeile mit dem Button hat ein zusätzliches CSS-Merkmal margin-top: auto.

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 Lösung hängt tief: CSS subgrid ist unterwegs. Bislang gibt es diese Lösung für ein Spaltenraster nur im Technology Preview von Safari.