Подгридови во CSS

Подгридот е варијација на вгнезден грид, но за разлика од него влијае на големината на родителскиот грид-контејнер. За да поставите подгрид, потребно е во самиот детски елемент да се постави својството display со вредност subgrid.

На пример, ајде да создадеме вгнезден грид во четвртиот елемент:

<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: subgrid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 5px;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

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

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

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