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