grid-row-start xassəsi

grid-row-start xassəsi grid və ya şəbəkə daxilində elementin sətirlər üzrə başlanğıc 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 doğru sayılır. Mənfi ədəd göstərildikdə isə element əks qaydada yerləşəcək, yəni aşağıdan yuxarıya doğru.

Sintaksis

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

Nümunə

Gəlin grid daxilindəki elementlərə başlanğıc mövqelər 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;
}
#elem2 {
	grid-row-start: 2;
}
#elem3 {
	grid-row-start: 3;
}

Nümunə

İndi isə grid-row-start xassəsində mənfi ədədlər göstərək. İndi elem3 ən üst sətri tutacaq, elem1 isə - ən aşağı sətri:

<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;
}
#elem2 {
	grid-row-start: -2;
}
#elem3 {
	grid-row-start: -3;
}

Nümunə

Gəlin birinci blokun iki sətir tutmasını təmin edək. Bunun üçün bizə grid-row-start və grid-row-end xassələrini birləşdirmək lazımdır:

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

Həmçinin bax

grid-row-end xassəsi,
grid daxilində elementin sətirlər üzrə bitmə mövqeyini təyin edir
grid-row xassəsi,
grid daxilində elementin sətirlər üzrə başlanğıc və bitmə mövqelərini təyin edir
grid-template-rows xassəsi,
griddə sətirlərin sayını və enini təyin edir
grid-auto-rows xassəsi,
gizli griddə sətirlərin sayını və enini təyin edir