Sifa grid-row-start

Sifa grid-row-start huweka mwanzo wa msimamo wa kipengele katika gridi kwa safu. Thamani ya sifa inaweza kuwa nambari chanya au hasi. Ikiwa tunaweka nambari chanya, basia msimamo wa mwanzo wa kipengele huanzia juu kuelekea chini. Ukitaja nambari hasi kipengele kitawekwa kwa mpangilio wa nyuma, yaani, kutoka chini kwenda juu.

Kiufundi

kichagua {
	grid-row-start: nambari chanya au hasi;
}

Mfano

Wacha tuweke viambajengo kwenye gridi msimamo wa mwanzo:

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

Mfano

Sasa wacha kwenye sifa grid-row-start tutaje nambari hasi. Sasa elem3 itachukua safu ya juu kabisa, na elem1 - ya chini kabisa:

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

Mfano

Tufanye ili kizuizi cha kwanza kichukue safu mbili. Kwa hili tutahitaji kuchanganya sifa grid-row-start na 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;
}

Mfano

Sasa wacha tuweke kizuizi cha nne kisafu tatu:

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

Angalia pia

sifa grid-row-end,
ambayo huweka mwisho wa msimamo wa kipengele katika gridi kwa safu
sifa grid-row,
ambayo huweka mwanzo na mwisho wa msimamo wa kipengele katika gridi kwa safu
sifa grid-template-rows,
ambayo huweka idadi na upana wa safu katika gridi
sifa grid-auto-rows,
ambayo huweka idadi na upana wa safu katika gridi isiyo wazi