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 қасиеті,
ол жасырын гридтегі жолдардың саны мен енін көрсетеді