Īpašība grid-row-end

Īpašība grid-row-end nosaka elementa beigu pozīciju gridā vai režģī pa rindām. Īpašības vērtība var būt pozitīvs vai negatīvs skaitlis. Ja mēs norādām pozitīvu skaitli, tad elementa sākuma pozīcija tiek skaitīta no augšas uz leju. Norādot negatīvu skaitli, elements tiks novietots apgrieztā secībā, t.i., no apakšas uz augšu.

Sintakse

selektors {
	grid-row-end: pozitīvs vai negatīvs skaitlis;
}

Piemērs

Piešķirsim elementiem gridā beigu pozīcijas:

<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;
}

Piemērs

Padarīsim tā, lai pirmais bloks aizņemtu divas rindas:

<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;
}

Piemērs

Tagad piešķirsim ceturtajam blokam trīs rindas:

<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;
}

Piemērs

Un tagad īpašībās grid-row-start un grid-row-end norādīsim negatīvus skaitļus. Tagad elem3 aizņems augšējo rindu, un elem1 - apakšējo:

<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;
}

Skatiet arī

īpašība grid-row-start,
kas nosaka elementa sākuma pozīciju gridā pa rindām
īpašība grid-row,
kas nosaka elementa sākuma un beigu pozīcijas gridā pa rindām
īpašība grid-template-rows,
kas nosaka rindu skaitu un platumu gridā
īpašība grid-auto-rows,
kas nosaka rindu skaitu un platumu netiešajā gridā