Gnezdene CSS mreže

V sistemu mrež obstaja možnost dodajanja nove gnezdene mreže znotraj že ustvarjene mreže. Gnezdene mreže se pogosto uporabljajo za postavitev majhnih elementov znotraj blokov spletnega mesta. Da bi izkoristili to možnost, je treba v samem podrejenem elementu nastaviti lastnost display z vrednostjo grid.

Za primer ustvarimo v eni od celic mreže še eno mrežo:

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

Recimo, da imate mrežo, sestavljeno iz petih elementov, razporejenih v tri stolpce. Ustvarite v drugem elementu gnezdene mreže, v kateri bo tri podrejene elemente.

Spremenite prejšnjo nalogo tako, da bo v gnezdeni mreži pet podrejenih elementov.

Ustvarite v prvem in tretjem elementu gnezdene mreže s tremi podrejenimi elementi.