Миқдор ва паҳноии сатрҳо дар CSS Grid

Элементҳои Grid-ро инчунин дар сатрҳо ҷойгир кардан мумкин аст. Барои ин хусусияти grid-template-rows пешбинӣ шудааст. Ин хусусият бо фосила андозаҳои сатрҳоро қабул мекунад. Дар он ҳамон қиматҳое, ки мо барои сутунҳо омухтем, истифода бурдан мумкин аст.

Намуна

Барои намуна биёед блокҳоро дар чор сатр ҷойгир кунем:

<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.

Бигзор дар Grid-и шумо се сатр бошад. Чорун ки онҳо ҳамон паҳноиро дошта бошанд.