grid-row-end касиети

grid-row-end касиети элементтин гридде же тордо катарлар боюнча аяктоочу абалын белгилейт. Касиеттин мааниси оң же терс сан болушу мүмкүн. Эгер оң сан берилсе, анда элементтин баштапкы абалы жогортон төмөнгө карай эсептелет. Терс сан көрсөтүлгөн учурда элемент тескери тартипте, башкача айтканда төмөндөн жогору жайгашат.

Синтаксис

селектор {
	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;
	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-row касиети,
ал гриддеги элементтин катар боюнча баштапкы жана аяктоочу абалдарын белгилейт
grid-template-rows касиети,
ал гриддеги катарлардын санын жана туурасын белгилейт
grid-auto-rows касиети,
ал жашырын гриддеги катарлардын санын жана туурасын белгилейт