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