grid-row-end xususiyati

grid-row-end xususiyati grid yoki setkadagi elementning qatorlar bo‘yicha yakuniy pozitsiyasini belgilaydi. Xususiyatning qiymati ijobiy yoki salbiy son bo‘lishi mumkin. Agar ijobiy son belgilasak, elementning boshlang‘ich pozitsiyasi yuqoridan pastga hisoblanadi. Salbiy son ko‘rsatilganda element teskari tartibda joylashadi, ya’ni pastdan yuqoriga.

Sintaksis

selektor {
	grid-row-end: ijobiy yoki salbiy son;
}

Misol

Keling, griddagi elementlarga yakuniy pozitsiyalarni belgilaymiz:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}

Misol

Keling, birinchi blok ikkita qatorni egallasin:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 3;
}
#elem2 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem3 {
	grid-row-start: 2;
	grid-row-end: 3;
}

Misol

Endi to‘rtinchi blokga uchta qatorni belgilaymiz:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}
#elem4 {
	grid-row-start: 1;
	grid-row-end: 4;
}

Misol

Endi grid-row-start va grid-row-end xususiyatlarida salbiy sonlarni ko‘rsataylik. Endi elem3 eng yuqori qatorni egallaydi, elem1 esa eng pastki qatorni:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: -1;
	grid-row-end: -2;
}
#elem2 {
	grid-row-start: -2;
	grid-row-end: -3;
}
#elem3 {
	grid-row-start: -3;
	grid-row-end: -4;
}

Shuningdek qarang

grid-row-start xususiyati,
bu griddagi elementning qatorlar bo‘yicha boshlang‘ich pozitsiyasini belgilaydi
grid-row xususiyati,
bu griddagi elementning qatorlar bo‘yicha boshlang‘ich va yakuniy pozitsiyalarini belgilaydi
grid-template-rows xususiyati,
bu griddagi qatorlar soni va kengligini belgilaydi
grid-auto-rows xususiyati,
bu noaniq griddagi qatorlar soni va kengligini belgilaydi