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 хусусияти,
гриддаги устунларнинг сони ва энини белгилайди