Ominaisuus grid-row-start

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

Syntaksi

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

Esimerkki

Annetaan elementeille gridissä aloitussijainnit:

<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;
}
#elem2 {
	grid-row-start: 2;
}
#elem3 {
	grid-row-start: 3;
}

Esimerkki

Ja nyt määritetään ominaisuudessa grid-row-start negatiiviset luvut. Nyt elem3 vie ylimmän rivin, ja elem1 - alinman rivin:

<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;
}
#elem2 {
	grid-row-start: -2;
}
#elem3 {
	grid-row-start: -3;
}

Esimerkki

Tehdään niin, että ensimmäinen lohko vie kaksi riviä. Tätä varten tarvitsemme yhdistää ominaisuudet grid-row-start ja 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;
	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

Ja nyt määritetään 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;
}

Katso myös

ominaisuus grid-row-end,
joka määrittää elementin loppusijainnin gridissä riveillä
ominaisuus grid-row,
joka määrittää elementin aloitus- ja loppusijainnit 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ä