Subgrids in CSS

Ein Subgrid ist eine Variante eines verschachtelten Grids, im Gegensatz zu diesem beeinflusst es jedoch die Größe des übergeordneten Grid-Containers. Um ein Subgrid zu definieren, muss man in dem untergeordneten Element selbst die Eigenschaft display mit dem Wert subgrid setzen.

Lassen Sie uns als Beispiel im vierten Element ein verschachteltes Grid erstellen:

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

Angenommen, Sie haben ein Grid, das aus fünf Elementen besteht, die in zwei Spalten angeordnet sind. Erstellen Sie im dritten Element ein verschachteltes Grid, in dem sich seinerseits zwei untergeordnete Elemente befinden.

Ändern Sie die vorherige Aufgabe so, dass sich im verschachtelten Grid vier untergeordnete Elemente befinden.

Erstellen Sie zwei verschachtelte Grids - im zweiten Element und im fünften Element.