CSS Grid-də sıra sayı və eni

Grid elementlərini həmçinin sıralar üzrə yerləşdirmək olar. Bunun üçün grid-template-rows xassəsi nəzərdə tutulub. Bu xassə boşluqla ayrılmış sıra ölçülərini qəbul edir. Onda sütunlar üçün öyrəndiyimiz eyni dəyərləri tətbiq etmək olar.

Nümunə

Nümunə üçün gəlin blokları dörd sırada yerləşdirək:

<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;
}

Nümunə

Birinci və üçüncü sıralar üçün piksel ilə sabit en təyin edək, ikinci sıra isə qalan yeri tutsun:

<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;
}

Nümunə

Sıra ölçülərini təyin etmək üçün repeat funksiyasından istifadə edək:

<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;
}

Nümunə

Sıralara 50px hündürlük təyin edək, sıra sayını isə auto-fill dəyəri ilə avtomatik təyin edək:

<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;
}

Praktiki tapşırıqlar

Blokları üç sırada yerləşdirin. Birinci blok 100px ölçüdə, ikinci 150px, üçüncü isə 200px ölçüdə olsun.

Gridinizdə üç sıra olsun. Onların eyni enə malik olmasını təmin edin.