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 - эң ылдыйкысын:

<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 касиети,
ал жашырын гриддеги катарлардын санын жана туурасын белгилейт