Implizite Grids in CSS

Implizites Grid wird vom Browser automatisch erstellt, wenn die Anzahl der Elemente nicht in das explizite Grid passt. Schauen wir uns an, wie das passiert.

Nehmen wir an, wir haben vier Blöcke:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem3">4</div>
</div>

Nehmen wir an, unser Grid hat die Abmessungen 3 mal 3:

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
}

Platzieren wir drei unserer Blöcke im Grid:

#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}

Und den vierten Block platzieren wir in der vierten Reihe und Spalte:

#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Da unser Grid die Abmessungen 3 mal 3 hat, gibt es diese vierte Reihe und Spalte in diesem Grid nicht. Aber sie existieren nicht in expliziter Form, also von uns definiert. Aber der Browser wird sie implizit erstellen, also von selbst.

Dabei, da wir die Abmessungen nur für das explizite Grid angegeben haben, werden die Größen für Zellen außerhalb dieses Grids vom Browser berechnet. Das heißt, in unserem Fall werden die Abmessungen des vierten Blocks automatisch vom Browser festgelegt.

Schauen wir uns an, was wir bekommen:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}
#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Nehmen wir an, in Ihrem Grid gibt es 6 Blöcke. Platzieren Sie 3 Blöcke im expliziten Grid und drei Blöcke im impliziten.