Grile CSS imbricate

În sistemul de grid există posibilitatea de a adăuga un nou grid imbricat în propria rețea creată. Grilele imbricate sunt utilizate pe scară largă pentru a poziționa elemente mici în interiorul blocurilor site-ului. Pentru a profita de această posibilitate, este necesar să setați în elementul copil însuși proprietatea display cu valoarea grid.

De exemplu, să creăm un alt grid în una dintre celulele gridului:

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

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

Modificați problema anterioară astfel încât în gridul imbricat să se afle cinci elemente copil.

Creați în primul și al treilea element câte un grid imbricat cu câte trei elemente copil.