Nested CSS Grids

The grid system has the ability to add a new nested grid to your own grid. Nested grids are widely used when placing small elements inside site blocks. To use this feature, you need to set the display property in the child element itself with the value grid.

As an example, let's create another grid in one of the grid cells:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr / 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Let's say you have a grid consisting of five elements arranged in three columns. Create a nested grid in the second element, which in turn will have three child elements.

Modify the previous task so that the nested grid has five children.

Create a nested grid with three child elements in the first and third elements.