Proprietà grid-template

La proprietà grid-template definisce il numero e la larghezza delle righe e delle colonne che un elemento occuperà nella griglia ed è una forma abbreviata delle proprietà grid-template-rows e grid-template-columns. Le righe e le colonne su cui verrà posizionato l'elemento sono indicate tramite una barra. La proprietà grid-template viene impostata nell'elemento genitore e determina il posizionamento degli elementi figli. Nel valore della proprietà specifichiamo la larghezza delle righe o delle colonne in qualsiasi unità per dimensioni.

Quando si specificano valori in pixel nelle proprietà, le dimensioni degli elementi corrisponderanno esattamente ad essi. Se usiamo la parola auto, le colonne e le righe riempiranno tutto lo spazio disponibile. L'uso dell'unità fr (frazione) significa che tutto lo spazio sarà suddiviso in parti uguali. Il vantaggio dell'unità fr è la sua adattabilità a diversi contenitori o risoluzioni dello schermo, poiché fr divide semplicemente lo spazio nel numero indicato di frazioni senza essere vincolato a una dimensione precisa in pixel.

Sintassi

selettore {
	grid-template: larghezza e numero di righe / larghezza e numero di colonne;
}

Esempio

Creiamo una tabella utilizzando la proprietà grid-template:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Esempio

Ora assegniamo alla seconda e alla terza riga la stessa larghezza, e ad ogni colonna una larghezza diversa:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Esempio

Ora, nella tabella dell'esempio precedente, rendiamo la riga superiore larga due frazioni, e la prima colonna larga mezza frazione:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Vedi anche

la proprietà grid,
che definisce la forma abbreviata delle proprietà per colonne e righe
la proprietà grid-template-rows,
che definisce il numero e la larghezza delle righe nella griglia
la proprietà grid-template-columns,
che definisce il numero e la larghezza delle colonne nella griglia