Geneste CSS Roosters

In die roosterstelsel is dit moontlik om 'n nuwe geneste rooster by jou geskepte rooster te voeg. Geneste roosters word wyd gebruik om klein elemente binne blokke van 'n webwerf te plaas. Om hierdie funksie te gebruik, moet jy die eienskap display met die waarde grid in die kindelement self stel.

Laat ons byvoorbeeld 'n ander rooster skep in een van die selle van die rooster:

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

Gestel jy het 'n rooster wat uit vyf elemente bestaan, gerangskik in drie kolomme. Skep 'n geneste rooster in die tweede element, wat op sy beurt drie kindelemente sal hê.

Wysig die vorige taak sodat die geneste rooster vyf kindelemente bevat.

Skep 'n geneste rooster met drie kindelemente in die eerste en derde elemente.