Хосияти grid-row-start

Хосияти grid-row-start вазъияти ибтидоии унсурро дар грид ё сетка бар асоси сатрҳо муқаррар мекунад. Қимати хосият метавонад рақами мусбӣ ё манфӣ бошад. Агар рақами мусбӣ муқаррар кунем, пас вазъияти ибтидоии унсур аз боло ба поён ҳисоб карда мешавад. Дар сурати муқаррар кардани рақами манфӣ унсур дар тартиби баръакс ҷойгир карда мешавад, яъне аз поён ба боло.

Синтаксис

интихобкунанда {
	grid-row-start: рақами мусбӣ ё манфӣ;
}

Намуна

Биёед барои унсурҳо дар грид вазъиятҳои ибтидоиро муқаррар кунем:

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

Намуна

Ва акнун биёед дар хосияти grid-row-start рақамҳои манфиро муқаррар кунем. Акнун elem3 баландтарин сатрро ишғол мекунад, ва elem1 - пасттарин сатрро:

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

Намуна

Биёед тавре созем, ки блоки якум ду сатрро ишғол кунад. Барои ин мо ба хосиятҳои grid-row-start ва grid-row-end ниёз дорем:

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

Намуна

Акнун биёед барои блоки чорум се сатр таъин кунем:

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

Ҳамчунин бубинед

хосияти grid-row-end,
ки вазъияти хотимавии унсурро дар грид бар асоси сатрҳо муқаррар мекунад
хосияти grid-row,
ки вазъиятҳои ибтидоӣ ва хотимавии унсурро дар грид бар асоси сатрҳо муқаррар мекунад
хосияти grid-template-rows,
ки миқдору бараи сатрҳоро дар грид муқаррар мекунад
хосияти grid-auto-rows,
ки миқдору бараи сатрҳоро дар гриди нозоҳир муқаррар мекунад