grid-row-start xususiyati

grid-row-start xususiyati grid yoki setkadagi elementning qatorlar bo‘yicha boshlang‘ich pozitsiyasini belgilaydi. Xususiyatning qiymati musbat yoki manfiy son bo‘lishi mumkin. Agar musbat son belgilasak, elementning boshlang‘ich pozitsiyasi yuqoridan pastga qarab hisoblanadi. Manfiy son ko‘rsatilganda element teskari tartibda joylashadi, ya'ni pastdan yuqoriga qarab.

Sintaksis

selektor {
	grid-row-start: musbat yoki manfiy son;
}

Misol

Keling, griddagi elementlarga boshlang‘ich 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;
}
#elem2 {
	grid-row-start: 2;
}
#elem3 {
	grid-row-start: 3;
}

Misol

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

Misol

Keling, birinchi blok ikkita qatorni egallasin. Buning uchun bizga grid-row-start va grid-row-end xususiyatlarini birlashtirish kerak bo‘ladi:

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

Shuningdek qarang

grid-row-end xususiyati,
bu griddagi elementning qatorlar bo‘yicha yakuniy 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