Proprietatea grid-template-areas

Proprietatea grid-template-areas definește plasarea elementelor în grid. În primul rând, atribuim un nume fiecărui element-descendent folosind proprietatea grid-area. Apoi, în elementul-părinte, specificăm proprietatea grid-template-areas, în care enumerăm numele elementelor-descendent în ordinea în care dorim să le plasăm în grid.

Sintaxă

selector {
	grid-template-areas: numele elementelor-descendent;
}

Exemplu

Să definim aranjarea elementelor noastre în grid:

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

Exemplu

Și acum, în loc de numele unor elemente, să specificăm un punct '.'. După cum se vede din rezultatul codului executat, în acest caz, în schemă va fi plasat un bloc gol:

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

Vezi și

proprietatea grid-area,
care atribuie un nume elementului în grid