Combinations of Row and Column Spanning in CSS Grids

Let's look at the different types of row and column joins.

Example

Let's make a table by combining the grid-column and grid-row properties:

<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 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Example

Now let's make the first and fourth blocks take up the entire row, the second blocks take up two rows and two columns, and the third and fourth blocks take up one row and two columns:

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

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

Example

Let's make the first element in the table take up all the columns on the first row, and the remaining elements are placed on the second row, taking up columns of equal width:

<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: 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 2 / 3;
}
#elem4 {
	grid-row: 2 / 3;
}

Example

Let's modify the previous example so that the second element takes up a column that is three times wider than the columns of the third and fourth elements:

<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 {
	height: 300px;
	width: 400px;
	display: grid;
	grid-template-columns: 3fr 1fr 1fr;
	
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 2 / 3;
}
#elem4 {
	grid-row: 2 / 3;
	
}

Example

Now let's place two elements on the first row, setting different column widths for each:

<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: repeat(4, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 1 / 2;
	grid-column: 4 / 5;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 1 / 3;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 3 / 5;
}

Example

Now let's say we have a table consisting of five elements. Let's put the first element on the top row, and all the others on the second row:

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

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

Practical tasks

Place all elements according to the following example: