Proprietà grid-template-areas

La proprietà grid-template-areas definisce il posizionamento degli elementi nella griglia. Per prima cosa, assegna un nome a ogni elemento figlio utilizzando la proprietà grid-area. Quindi, nell'elemento genitore, specifichiamo la proprietà grid-template-areas, in cui elenchiamo i nomi degli elementi figli nell'ordine in cui vogliamo posizionarli nella griglia.

Sintassi

selettore {
	grid-template-areas: nomi degli elementi figli;
}

Esempio

Definiamo la disposizione dei nostri elementi nella griglia:

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

Esempio

Ora, invece di alcuni nomi di elementi, usiamo un punto '.'. Come si può vedere dal risultato del codice eseguito, in questo caso verrà posizionato uno spazio vuoto nella griglia:

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

Vedi anche

la proprietà grid-area,
che assegna un nome all'elemento nella griglia