Vnořené CSS gridy

V systému gridu existuje možnost přidat do vlastní vytvořené sítě nový vnořený grid. Vnořené gridy se široce používají při umísťování malých prvků uvnitř bloků webu. Aby bylo možné této možnosti využít, je třeba v samotném podřízeném prvku nastavit vlastnost display s hodnotou grid.

Jako příklad si v jedné z buněk gridu vytvořme další grid:

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

Předpokládejme, že máte grid skládající se z pěti prvků, umístěných do tří sloupců. Vytvořte ve druhém prvku vnořený grid, ve kterém bude naopak tři podřízené prvky.

Upravte předchozí úlohu tak, aby se ve vnořeném gridu nacházelo pět podřízených prvků.

Vytvořte v prvním a třetím prvku vnořený grid s třemi podřízenými prvky.