Propriété grid-template-areas

La propriété grid-template-areas définit le placement des éléments dans la grille. D'abord, on attribue un nom à chaque élément enfant à l'aide de la propriété grid-area. Ensuite, dans l'élément parent, on indique la propriété grid-template-areas, dans laquelle on énumère les noms des éléments enfants dans l'ordre dans lequel on souhaite les placer dans la grille.

Syntaxe

sélecteur {
	grid-template-areas: noms des éléments enfants;
}

Exemple

Définissons l'emplacement de nos éléments dans la grille :

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

Exemple

Maintenant, indiquons un point '.' au lieu des noms de certains éléments. Comme on peut le voir dans le résultat du code exécuté dans ce cas, un bloc vide sera placé dans le schéma :

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

Voir aussi

la propriété grid-area,
qui définit le nom de l'élément dans la grille