Вгнездени CSS гридови

Во системот на грид постои можност да се додаде нов вгнезден грид во веќе создадената мрежа. Вгнездените гридови се широко користени за позиционирање на мали елементи внатре во блоковите на веб-страницата. За да се искористи оваа можност, потребно е во самиот детски елемент да се постави својството display со вредност 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;
}

Нека имате грид кој се состои од пет елементи, распоредени во три колони. Создадете во вториот елемент вгнезден грид, во кој пак ќе има три детски елементи.

Променете ја претходната задача така што во вгнездениот грид ќе има пет детски елементи.

Создадете во првиот и третиот елемент по еден вгнезден грид со три детски елементи.