Својство 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,
које задаје број и ширину редова у имплицитном гриду