Grid-row қасиеті

grid-row қасиеті тордағы элементтің жолдар бойынша бастапқы және соңғы позицияларын белгілейді. Қасиет мәндері оң немесе теріс сандар болуы мүмкін, олар қиғаш сызық арқылы көрсетіледі. Бірінші сан элементтің бастапқы позициясын білдіреді, екіншісі - соңғы позицияны. Егер мән ретінде оң сан берілсе, онда элементтің позициясы жоғарыдан төмен қарай есептеледі. Теріс сан көрсетілген кезде элемент кері ретпен орналасады, яғни төменнен жоғары қарай.

Синтаксис

селектор {
	grid-row: бастапқы позиция / соңғы позиция;
}

Мысал

Тордағы элементтерге бастапқы және соңғы позицияларды белгілейік:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}

Мысал

Енді grid-row қасиетінде теріс сандарды көрсетейік:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: -1 / -2;
}
#elem2 {
	grid-row: -2 / -3;
}
#elem3 {
	grid-row: -3 / -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: 1 / 3; /* екі жол */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 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: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

Мысал

grid-row және grid-column қасиеттерін біріктірейік:

<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 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Мысал

Енді бірінші және бесінші блоктер бүкіл жолды алатындай, ал екінші блок - екі жол мен екі бағанды, ал үшінші және төртінші блоктер - бір жол мен екі бағанды алатындай етейік:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Сондай-ақ қараңыз

grid-column қасиеті,
тордағы элементтің бағандар бойынша бастапқы және соңғы позицияларын белгілейді
grid-row-start қасиеті,
тордағы элементтің жолдар бойынша бастапқы позициясын белгілейді
grid-row-end қасиеті,
тордағы элементтің жолдар бойынша соңғы позициясын белгілейді