Omadus grid-row-start

Omadus grid-row-start määrab elemendi alguspositsiooni gridis või võrgus ridade kaupa. Omaduse väärtuseks võib olla positiivne või negatiivne arv. Kui määrame positiivse arvu, siis elemendi alguspositsioon loetakse ülevalt alla. Negatiivse arvu määramisel element paikneb vastupidises järjekorras, st alt üles.

Süntaks

selektor {
	grid-row-start: positiivne või negatiivne arv;
}

Näide

Määrame gridis elementidele alguspositsioonid:

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

Näide

Nüüd määrame omaduses grid-row-start negatiivsed arvud. Nüüd hakkab elem3 asuma kõige ülemisel real ja elem1 - kõige alumisel:

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

Näide

Teeme nii, et esimene plokk hõlmaks kahte rida. Selleks peame kombineerima omadusi 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;
}

Näide

Nüüd määrame neljandale plokile kolm rida:

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

Vaata ka

omadus grid-row-end,
mis määrab elemendi lõpppositsiooni gridis ridade kaupa
omadus grid-row,
mis määrab elemendi algus- ja lõpppositsioonid gridis ridade kaupa
omadus grid-template-rows,
mis määrab ridade arvu ja laiuse gridis
omadus grid-auto-rows,
mis määrab ridade arvu ja laiuse kaudses gridis