Свойство 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,
което задава броя и ширината на редовете в неявен грид