grid-row-end хусусияти

grid-row-end хусусияти элементнинг гридда ёки сеткадаги қаторлар буйича охирги ўрнини белгилайди. Хусусиятнинг қиймати мусбат ёки манфий сон бўлиши мумкин. Агар мусбат сон белгиланса, элементнинг бошланғич ўрни юқоридан пастга қараб ҳисобланади. Манфий сон кўрсатилганда эса элемент тескари тартибда жойлашади, яъни pastdan yuqoriga.

Синтаксис

селектор {
	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;
}

Мисол

Биринчи блокни икки қатор эгалashi учун қилаймиз:

<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 эса энг pastki қаторни эгаллар:

<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 хусусияти,
у ноаник гриддаги қаторлар сони ва кенглигини белгилайди