Subgrid-uri în CSS

Subgrid-ul este o variație a unui grid imbricat, dar spre deosebire de acesta, afectează dimensiunea containerului părinte grid. Pentru a seta un subgrid, este necesar să setați în elementul copil însuși proprietatea display cu valoarea subgrid.

De exemplu, să creăm un grid imbricat în al patrulea 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;
}

Să presupunem că aveți un grid format din cinci elemente, aranjate în două coloane. Creați în al treilea element un grid imbricat, care la rândul său va avea două elemente copil.

Modificați problema anterioară astfel încât în grid-ul imbricat să se afle patru elemente copil.

Creați două grid-uri imbricate - în al doilea element și în al cincilea element.