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 касиети,
гриддеги тилкелердин санын жана туурасын белгилейт