Eienskap grid-row-end

Die eienskap grid-row-end spesifiseer die finale posisie van 'n element in 'n rooster volgens rye. Die waarde van die eienskap kan 'n positiewe of negatiewe getal wees. As ons 'n positiewe getal spesifiseer, word die beginposisie van die element van bo na onder getel. As 'n negatiewe getal gespesifiseer word, sal die element in die omgekeerde volgorde geplaas word, d.w.s. van onder na bo.

Sintaksis

selektor {
	grid-row-end: positiewe of negatiewe getal;
}

Voorbeeld

Kom ons spesifiseer finale posisies vir elemente in die rooster:

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

Voorbeeld

Laat ons die eerste blok twee rye laat beslaan:

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

Voorbeeld

Laat ons nou die vierde blok drie rye toewys:

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

Voorbeeld

En laat ons nou negatiewe getalle spesifiseer in die eienskappe grid-row-start en grid-row-end. Nou sal elem3 die heel boonste ry beslaan, en elem1 - die heel onderste:

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

Kyk ook

die eienskap grid-row-start,
wat die beginposisie van 'n element in 'n rooster volgens rye spesifiseer
die eienskap grid-row,
wat die begin- en eindposisies van 'n element in 'n rooster volgens rye spesifiseer
die eienskap grid-template-rows,
wat die aantal en breedte van rye in 'n rooster spesifiseer
die eienskap grid-auto-rows,
wat die aantal en breedte van rye in 'n implisiete rooster spesifiseer