CSS Spalten gleicher Höhe mit CSS Grid

CSS Grid: Spalten gleicher Höhe

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

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.

@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

Am Ende kann CSS Grid nicht nur Spalten auf dieselbe Höhe bringen, sondern auch die Zeilen innerhalb von Spalten, so dass wir an eine flexible Wiederauferstehung der Tabellen kommen.

Alles was dafür eingesetzt wird, ist die Darstellung der einzelnen Spalten im Grid-Raster.

.grid .option {
	display: grid;
	grid-template-rows: 0.6fr 2fr 0.6fr 0.6fr;
}
GRID-CELL 1
Zeile 2
icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

finibus ante

GRID-CELL 2
icon

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

Sed ac

GRID-CELL 3
icon

Duis lacinia tempor nulla in mollis.

Vivamus.