Verschachtelte CSS Grids

Im Grid-System besteht die Möglichkeit, ein neues verschachteltes Grid in das selbst erstellte Raster einzufügen. Verschachtelte Grids werden häufig verwendet, um kleine Elemente innerhalb von Website-Blöcken anzuordnen. Um diese Möglichkeit zu nutzen, muss in dem Kindelement selbst die Eigenschaft display mit dem Wert grid gesetzt werden.

Lassen Sie uns als Beispiel in einer der Zellen des Grids ein weiteres 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: 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;
}

Angenommen, Sie haben ein Grid, das aus fünf Elementen besteht, die über drei Spalten angeordnet sind. Erstellen Sie im zweiten Element ein verschachteltes Grid, das seinerseits drei Kindelemente enthält.

Ändern Sie die vorherige Aufgabe so, dass das verschachtelte Grid fünf Kindelemente enthält.

Erstellen Sie im ersten und dritten Element jeweils ein verschachteltes Grid mit drei Kindelementen.