Својство grid-template

Својството grid-template го одредува бројот и ширината на редовите и колоните што ќе ги зафаќа елементот во грид или мрежа и е скратена форма на својствата grid-template-rows и grid-template-columns. Редовите и колоните, на кои ќе биде поставен елементот се означуваат со коса црта. Својството grid-template се задава во елементот-родител и го одредува распоредот на елементите-потомци. Во вредноста на својството ја наведуваме ширината на редовите или колоните во какви било единици за димензии.

При наведување на вредности во својствата во пиксели димензиите на елементите точно ќе им одговараат. Ако го зададеме зборот auto, тогаш колоните и редовите ќе го исполнуваат целиот достапен простор. Користењето на единицата fr (фракција) значи дека целиот простор ќе биде поделен на еднакви делови. Предноста на fr е неговата адаптивност на различни контејнери или резолуции на екранот, бидејќи fr едноставно ги дели на наведениот број фракции без врска со точната големина во пиксели.

Синтакса

селектор {
	grid-template: ширина и број на редови / ширина и број на колони;
}

Пример

Ајде со помош на својството 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;
}

Пример

А сега ајде на вториот и третиот ред да им зададеме иста ширина, а на секоја колона - различна ширина:

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

Пример

А сега во табелата од претходниот пример горниот ред да го направиме со ширина од две фракции, а првата колона - од половина фракција:

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

Погледнете исто така

својството grid,
кое задава скратена нотација на својствата за колони и редови
својството grid-template-rows,
кое го одредува бројот и ширината на редовите во гридот
својството grid-template-columns,
кое го одредува бројот и ширината на колоните во гридот