Subgrids in CSS

Subgrid is een variant van een genest grid, maar in tegenstelling tot een genest grid beïnvloedt het de grootte van de bovenliggende grid-container. Om een subgrid te maken, moet je in het onderliggende element zelf de property display instellen met de waarde subgrid.

Laten we als voorbeeld een genest grid creëren in het vierde element:

<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: subgrid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 5px;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Stel je hebt een grid dat bestaat uit vijf elementen, gerangschikt in twee kolommen. Creëer in het derde element een genest grid, waarin op zijn beurt twee onderliggende elementen zitten.

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

Creëer twee geneste grids - in het tweede element en in het vijfde element.