Propiedad grid-template-areas

La propiedad grid-template-areas define la colocación de elementos en grid. Primero, asignamos un nombre a cada elemento hijo mediante la propiedad grid-area. Luego, en el elemento padre especificamos la propiedad grid-template-areas, en la cual listamos los nombres de los elementos hijos en el orden en que queremos colocarlos en el grid.

Sintaxis

selector {
	grid-template-areas: nombres de elementos hijos;
}

Ejemplo

Vamos a definir la disposición de nuestros elementos en el 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;
}

Ejemplo

Y ahora, en lugar de los nombres de algunos elementos, indiquemos un punto '.'. Como se puede ver en el resultado del código ejecutado, en este caso se colocará un bloque vacío en el 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;
}

Véase también

la propiedad grid-area,
que asigna un nombre al elemento en el grid