Уласцівасць 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,
якое задае колькасць і шырыню радоў у няяўным грідзе