Svojstvo grid-template

Svojstvo grid-template određuje broj i širinu redova i kolona koje će element da zauzima u grid-u ili mreži i predstavlja skraćeni oblik svojstava grid-template-rows i grid-template-columns. Redovi i kolone, na kojima će biti postavljen element, označavaju se kroz kosu crtu. Svojstvo grid-template se postavlja u elementu-roditelju i određuje raspored elemenata-potomaka. U vrednosti svojstva navodimo širinu redova ili kolona u bilo kojim jedinicama za veličine.

Prilikom navođenja vrednosti u svojstvima u pikselima veličine elemenata će tačno odgovarati tim vrednostima. Ako postavimo reč auto, onda će kolone i redovi popuniti sav dostupan prostor. Korišćenje jedinice fr (frakcija) znači, da će sav prostor biti podeljen na jednake delove. Prednost fr je njegova adaptivnost na različite kontejnere ili rezolucije ekrana, pošto fr prosto deli prostor na naznačeni broj frakcija bez vezivanja za tačnu veličinu u pikselima.

Sintaksa

selektor {
	grid-template: širina i broj redova / širina i broj kolona;
}

Primer

Hajde da uz pomoć svojstva grid-template napravimo tabelu:

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

Primer

A sada hajde da drugom i trećem redu postavimo istu širinu, a svakoj koloni - različitu širinu:

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

Primer

A sada u tabeli iz prethodnog primera hajde da gornji red učinimo širokim dve frakcije, a prvu kolonu - pola frakcije:

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

Vidite takođe

svojstvo grid,
koje postavlja skraćeni zapis svojstava kolona i redova
svojstvo grid-template-rows,
koje određuje broj i širinu redova u grid-u
svojstvo grid-template-columns,
koje određuje broj i širinu kolona u grid-u