Eigenschap grid-template-areas

De eigenschap grid-template-areas bepaalt de plaatsing van elementen in een grid. Eerst ken je een naam toe aan elk kindelement met behulp van de eigenschap grid-area. Vervolgens specificeren we in het ouderelement de eigenschap grid-template-areas, waarin we de namen van de kindelementen opsommen in de volgorde waarin we ze in het grid willen plaatsen.

Syntaxis

selector {
	grid-template-areas: namen van kindelementen;
}

Voorbeeld

Laten we de plaatsing van onze elementen in het grid instellen:

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

Voorbeeld

Laten we nu in plaats van de namen van sommige elementen een punt '.' specificeren. Zoals te zien is in het resultaat van de uitgevoerde code, zal in dit geval een leeg blok worden geplaatst in het schema:

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

Zie ook

de eigenschap grid-area,
die de naam van een element in het grid instelt