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

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

Синтаксис

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

Намуна

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

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

Намуна

Биёед тавре созем, ки блоки аввал ду сатрро ишғол кунад:

<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-start ва grid-row-end ададҳои манфиро муайян кунем. Акнун 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;
	grid-row-end: -2;
}
#elem2 {
	grid-row-start: -2;
	grid-row-end: -3;
}
#elem3 {
	grid-row-start: -3;
	grid-row-end: -4;
}

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

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