CSS гридларидаги қаторлар сони ва эни

Грид элементларини қаторлар бўйича ҳам жойлаштириш мумкин. Бунинг учун grid-template-rows хусусияти мўлжалланган. Бу хусусият бўшлиқ билан ажратиб қаторлар ўлчамларини қабул қилади. Унда биз ustunlar учун ўрганган бизинг қийматларини қўллаш мумкин.

Мисол

Мисол учун блокларни тўрт қаторга жойлаштирамиз:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 50px 100px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Мисол

Биринчи ва учинчи қаторлар учун пикселлардаги белкиланган энини кўрсатамиз, иккинчи қатор эса қолган жойни эгалсин:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 100px auto 60px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Мисол

Қаторлар ўлчамларини кўрсатиш учун repeat функциясидан фойдаланамиз:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Мисол

Қаторлар баландлигини 50px деб белгилаймиз, қаторлар сонини эса auto-fill қиймати ёрдамида автоматник ҳолда белгилаймиз:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fill, 50px);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Амалий машқлар

Блокларни уч қаторга жойлантиринг. Биринчи блок 100px ўлчамга, иккинчи блок 150px ўлчамга, учинчи блок эса 200px ўлчамга эга бўлсин.

Гридингизда уч қатор бўлсин. Уларнинг барчаси бир хил энга эга бўлишини таъминланг.