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