Egenskapen grid-row-end

Egenskapen grid-row-end anger slutpositionen för ett element i ett grid eller ett nät längs radaxeln. Värdet på egenskapen kan vara ett positivt eller negativt tal. Om vi anger ett positivt tal, räknas elementets startposition från toppen och nedåt. När ett negativt tal anges kommer elementet att placeras i omvänd ordning, d.v.s. från botten och uppåt.

Syntax

selector {
	grid-row-end: positivt eller negativt tal;
}

Exempel

Låt oss ange slutpositioner för elementen i griddet:

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

Exempel

Låt oss göra så att det första blocket tar upp två rader:

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

Exempel

Låt oss nu tilldela det fjärde blocket tre rader:

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

Exempel

Låt oss nu ange negativa tal i egenskaperna grid-row-start och grid-row-end. Nu kommer elem3 att ta den översta raden, och elem1 - den nedersta:

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

Se även

egenskapen grid-row-start,
som anger startpositionen för ett element i ett grid längs radaxeln
egenskapen grid-row,
som anger start- och slutpositionerna för ett element i ett grid längs radaxeln
egenskapen grid-template-rows,
som anger antalet och bredden på rader i ett grid
egenskapen grid-auto-rows,
som anger antalet och bredden på rader i ett implicit grid