Zeilen zusammenfassen in CSS Grids

Zeilen und Spalten bilden im Grid das Raster. Man kann ein Element so konfigurieren, dass es nicht nur eine Zelle des Rasters, sondern mehrere einnimmt.

Damit ein Element mehr als eine Zeile einnimmt, muss ihm die Eigenschaft grid-row zugewiesen werden. In dieser Eigenschaft werden durch einen Schrägstrich getrennt Zahlen angegeben, die die Start- und Endposition des Elements im Grid definieren.

Dabei erstreckt sich das Element von der ersten Position bis zur zweiten Position (ohne diese einzuschließen). Das bedeutet, der Wert 1 / 2 lässt das Element nur die erste Zelle einnehmen, während der Wert 1 / 3 das Element zwingt, die erste und zweite Zelle einzunehmen (aber ohne die dritte).

Beispiel

Angenommen, wir haben ein Grid mit drei Kind-Elementen. Lassen Sie uns diese so platzieren, dass das erste Element zwei Zeilen einnimmt:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3; /* zwei Zeilen */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
}

Beispiel

Weisen wir nun einem vierten Block drei Zeilen zu:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

Praktische Aufgaben

Platzieren Sie alle Elemente und führen Sie die Zeilenzusammenfassung entsprechend dem folgenden Beispiel durch: