Sifa grid-row-end

Sifa grid-row-end inabainisha mwisho wa nafasi ya kipengele katika gridi au wavu kwa safu. Thamani ya sifa inaweza kuwa nambari chanya au hasi. Ikiwa tunabainisha nambari chanya, basie nafasi ya mwanzo ya kipengele inahesabiwa kutoka juu kuelekea chini. Unapobainisha nambari hasi kipengele kitapangwa kwa mpangilio wa nyuma, yaani, kutoka chini kwenda juu.

Kisarufi

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

Mfano

Wacha tuweke viwango vya mwisho vya nafasi kwa vipengele katika gridi:

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

Mfano

Wacha tufanye ili kizuizi cha kwanza kichukue safu mbili:

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

Mfano

Sasa wacha katika sifa grid-row-start na grid-row-end tubainishe nambari hasi. Sasa elem3 itachukua safu ya juu kabisa, na elem1 - safu 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;
	grid-row-end: -2;
}
#elem2 {
	grid-row-start: -2;
	grid-row-end: -3;
}
#elem3 {
	grid-row-start: -3;
	grid-row-end: -4;
}

Angalia pia

sifa grid-row-start,
ambayo inabainisha nafasi ya mwanzo ya kipengele katika gridi kwa safu
sifa grid-row,
ambayo inabainisha nafasi ya mwanzo na mwisho ya kipengele katika gridi kwa safu
sifa grid-template-rows,
ambayo inabainisha idadi na upana wa safu katika gridi
sifa grid-auto-rows,
ambayo inabainisha idadi na upana wa safu katika gridi isiyo wazi