Својство grid-row-end

Својство grid-row-end задаје крајњу позицију елемента у гриду или мрежи по редовима. Вредношћу својства може бити позитиван или негативан број. Ако задамо позитиван број, тада се почетна позиција елемента рачуна одозго надоле. При навођењу негативног броја елемент ће се налазити у обрнутом редоследу, тј. одоздо нагоре.

Синтакса

селектор {
	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;
	padding: 10px;
	width: 400px;
	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;
}

Пример

Направимо да први блок заузима два реда:

<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-start и grid-row-end наведемо негативне бројеве. Сада ће 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;
	grid-row-end: -2;
}
#elem2 {
	grid-row-start: -2;
	grid-row-end: -3;
}
#elem3 {
	grid-row-start: -3;
	grid-row-end: -4;
}

Погледајте такође

својство grid-row-start,
које задаје почетну позицију елемента у гриду по редовима
својство grid-row,
које задаје почетну и крајњу позицију елемента у гриду по редовима
својство grid-template-rows,
које задаје број и ширину редова у гриду
својство grid-auto-rows,
које задаје број и ширину редова у имплицитном гриду