grid-row-end-ominaisuus

Ominaisuus grid-row-end määrittää elementin loppuposition gridissä tai verkossa riveillä. Ominaisuuden arvona voi olla positiivinen tai negatiivinen luku. Jos annamme positiivisen luvun, elementin alkupositio lasketaan ylhäältä alas. Kun määritetään negatiivinen luku, elementti sijoitetaan käänteisessä järjestyksessä, eli alhaalta ylös.

Syntaksi

valitsija {
	grid-row-end: positiivinen tai negatiivinen luku;
}

Esimerkki

Määritetään elementeille gridissä loppuposition:

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

Esimerkki

Tehdään niin, että ensimmäinen lohko kattaa kaksi riviä:

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

Esimerkki

Määritetään nyt neljännelle lohkolle kolme riviä:

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

Esimerkki

Määritetään nyt ominaisuuksissa grid-row-start ja grid-row-end negatiiviset luvut. Nyt elem3 vie ylimmän rivin, ja elem1 - alimman:

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

Katso myös

ominaisuus grid-row-start,
joka määrittää elementin alkuposition gridissä riveillä
ominaisuus grid-row,
joka määrittää elementin alkuposition ja loppuposition gridissä riveillä
ominaisuus grid-template-rows,
joka määrittää rivien määrän ja leveyden gridissä
ominaisuus grid-auto-rows,
joka määrittää rivien määrän ja leveyden implisiittisessä gridissä