Својство 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,
које одређује број и ширину колона у гриду