Хосияти 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,
ки шумора ва васеъии сутунҳоро дар грид муайян мекунад