Podgridy v CSS

Podgrid je variantou vnořeného gridu, ale na rozdíl od něj ovlivňuje velikost nadřazeného grid kontejneru. Abychom nastavili podgrid, je třeba v samotném podřízeném elementu nastavit vlastnost display s hodnotou subgrid.

Jako příklad vytvořme ve čtvrtém elementu vnořený 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: 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;
}

Nechť máte grid sestávající z pěti elementů, umístěných ve dvou sloupcích. Vytvořte ve třetím elementu vnořený grid, ve kterém se budou nacházet dva podřízené elementy.

Upravte předchozí úlohu tak, aby se ve vnořeném gridu nacházely čtyři podřízené elementy.

Vytvořte dva vnořené gridy - ve druhém elementu a pátém elementu.