Eigenschaft grid-row-end

Die Eigenschaft grid-row-end legt die Endposition eines Elements im Grid oder Raster entlang der Zeilen fest. Der Wert der Eigenschaft kann eine positive oder negative Zahl sein. Wenn wir eine positive Zahl angeben, wird die Startposition des Elements von oben nach unten gezählt. Bei Angabe einer negativen Zahl wird das Element in umgekehrter Reihenfolge positioniert, d.h. von unten nach oben.

Syntax

Selektor {
	grid-row-end: positive oder negative Zahl;
}

Beispiel

Lassen Sie uns den Elementen im Grid Endpositionen zuweisen:

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

Beispiel

Lassen Sie uns den ersten Block zwei Zeilen einnehmen lassen:

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

Beispiel

Weisen wir nun dem vierten Block drei Zeilen zu:

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

Beispiel

Lassen Sie uns nun in den Eigenschaften grid-row-start und grid-row-end negative Zahlen angeben. Nun wird elem3 die oberste Zeile einnehmen, und elem1 - die unterste:

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

Siehe auch

die Eigenschaft grid-row-start,
die die Startposition eines Elements im Grid entlang der Zeilen festlegt
die Eigenschaft grid-row,
die die Start- und Endpositionen eines Elements im Grid entlang der Zeilen festlegt
die Eigenschaft grid-template-rows,
die die Anzahl und Breite der Zeilen im Grid festlegt
die Eigenschaft grid-auto-rows,
die die Anzahl und Breite der Zeilen im impliziten Grid festlegt