Propriedade grid-template-areas

A propriedade grid-template-areas define o posicionamento dos elementos no grid. Primeiro, atribuímos um nome a cada elemento-filho usando a propriedade grid-area. Em seguida, no elemento-pai, especificamos a propriedade grid-template-areas, na qual listamos os nomes dos elementos-filhos na ordem em que queremos posicioná-los no grid.

Sintaxe

seletor {
	grid-template-areas: nomes dos elementos-filhos;
}

Exemplo

Vamos definir a posição dos nossos elementos no 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;
}

Exemplo

Agora vamos usar um ponto '.' em vez dos nomes de alguns elementos. Como pode ser visto no resultado do código executado, neste caso, um bloco vazio será posicionado no esquema:

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

Veja também

a propriedade grid-area,
que define o nome do elemento no grid