grid-row-end xassəsi

grid-row-end xassəsi grid və ya şəbəkə daxilində elementin sıralar üzrə bitmə mövqeyini təyin edir. Xassənin qiyməti müsbət və ya mənfi ədəd ola bilər. Əgər müsbət ədəd təyin etsək, onda elementin başlanğıc mövqeyi yuxarıdan aşağıya sayılır. Mənfi ədəd göstərildikdə element əks qaydada yerləşəcək, yəni aşağıdan yuxarıya.

Sintaksis

selektor {
	grid-row-end: müsbət və ya mənfi ədəd;
}

Nümunə

Gəlin grid daxilindəki elementlərə bitmə mövqeləri təyin edək:

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

Nümunə

Gəlin birinci blokun iki sıra tutmasını təmin edək:

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

Nümunə

İndi gəlin dördüncü bloka üç sıra təyin edək:

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

Nümunə

İndi gəlin grid-row-start və grid-row-end xassələrində mənfi ədədlər göstərək. İndi elem3 ən yuxarı sıranı, elem1 isə - ən aşağı sıranı tutacaq:

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

Həmçinin bax

grid-row-start xassəsi,
grid daxilində elementin sıralar üzrə başlanğıc mövqeyini təyin edir
grid-row xassəsi,
grid daxilində elementin sıralar üzrə başlanğıc və bitmə mövqelərini təyin edir
grid-template-rows xassəsi,
griddə sıraların sayını və enini təyin edir
grid-auto-rows xassəsi,
qeyri-aşkar griddə sıraların sayını və enini təyin edir