Geneste CSS Grids

In het grid systeem is het mogelijk om een nieuw genest grid toe te voegen aan je eigen gemaakte grid. Geneste grids worden veel gebruikt bij het plaatsen van kleine elementen binnen blokken van een website. Om deze mogelijkheid te gebruiken, moet je in het child element zelf de eigenschap display instellen met de waarde grid.

Laten we als voorbeeld in een van de cellen van het grid nog een grid maken:

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

Stel, je hebt een grid bestaande uit vijf elementen, gerangschikt in drie kolommen. Maak in het tweede element een genest grid aan, waarin op zijn beurt drie child elementen zitten.

Pas de vorige opgave zo aan, dat er in het geneste grid vijf child elementen zitten.

Maak in het eerste en derde element een genest grid met drie child elementen.