Уласцівасць 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,
якое задае колькасць і шырыню слупкоў у грідзе