Rejillas CSS anidadas

En el sistema de rejilla, es posible agregar una nueva rejilla anidada dentro de la rejilla creada. Las rejillas anidadas se utilizan ampliamente para colocar elementos pequeños dentro de los bloques del sitio. Para utilizar esta posibilidad, es necesario establecer en el propio elemento hijo la propiedad display con el valor grid.

Por ejemplo, creemos otra rejilla en una de las celdas de la rejilla:

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

Supongamos que tienes una rejilla que consta de cinco elementos, ubicados en tres columnas. Crea en el segundo elemento una rejilla anidada, que a su vez tenga tres elementos hijos.

Modifica la tarea anterior para que en la rejilla anidada haya cinco elementos hijos.

Crea en el primer y tercer elemento una rejilla anidada con tres elementos hijos cada una.