Свойство 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 эса энг pastки қаторни эгаллайди:

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