Pesastatud CSS-võred

Võresüsteemis on võimalik lisada loodud võrgustikku uus pesastatud võre. Pesastatud võreid kasutatakse laialdaselt saidi plokkides väikeste elementide paigutamiseks. Selle võimaluse kasutamiseks tuleb lapseelemendis ise määrata omadus display väärtusega grid.

Näiteks loome ühes võre lahtritest veel ühe võre:

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

Oletame, et teil on viie elemendiga võre, mis on paigutatud kolme veeru kaupa. Looge teises elemendis pesastatud võre, mis omakorda sisaldab kolme lasteelementi.

Muutke eelmist ülesannet nii, et pesastatud võres oleks viis lasteelementi.

Looge esimesse ja kolmandasse elementi pesastatud võred, milles igaühes on kolm lasteelementi.