Eigenschaft grid-template-areas

Die Eigenschaft grid-template-areas legt die Platzierung von Elementen im Grid fest. Zuerst weist man jedem Kindelement einen Namen mit Hilfe der Eigenschaft grid-area zu. Dann geben wir im Elternelement die Eigenschaft grid-template-areas an, in der wir die Namen der Kindelemente in der Reihenfolge auflisten, in der wir sie im Grid platzieren möchten.

Syntax

Selektor {
	grid-template-areas: Namen der Kindelemente;
}

Beispiel

Lassen Sie uns die Anordnung unserer Elemente im Grid festlegen:

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

#elem1 {
	grid-area: first;
}
#elem2 {
	grid-area: second;
}
#elem3 {
	grid-area: third;
}

#parent {
	display: grid;
	grid-template-areas: 'second first third';
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Beispiel

Lassen Sie uns nun anstelle der Namen einiger Elemente einen Punkt '.' angeben. Wie man am Ergebnis des ausgeführten Codes sehen kann, wird in diesem Fall ein leerer Block platziert:

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

#elem1 {
	grid-area: first;
}
#elem2 {
	grid-area: second;
}
#elem3 {
	grid-area: third;
}
#parent {
	display: grid;
	grid-template-areas: 'first . second third';
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Siehe auch

die Eigenschaft grid-area,
die den Namen eines Elements im Grid festlegt