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