Подгридове в 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;
}

Нека имате грид, състоящ се от пет елемента, разположени в две колони. Създайте в третия елемент вложен грид, в който на свой ред ще има два дъщерни елемента.

Променете предишната задача така, че във вложения грид да се съдържат четири дъщерни елемента.

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