Spanning Rows in CSS Grids

Rows and columns in grids form a grid. You can make an element occupy not one grid cell, but several.

To make an element span more than one row, it should be given the grid-row property. This property specifies numbers separated by a slash, indicating the start and end position of the elements in the grid.

This will stretch the element from the first position to the second position (but not including it). That is, a value of 1 / 2 will make the element occupy the first cell alone, and a value of 1 / 3 will make the element occupy the first and second cells (but not including the third).

Example

Let's say we have a grid with three child elements. Let's arrange them so that the first element takes up two rows:

<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; /* two rows */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
}

Example

Now let's assign three rows to the fourth block:

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

Practical tasks

Place all the elements and merge the rows according to the following example: