Eigenschaft grid-row-start

Die Eigenschaft grid-row-start legt die Startposition 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-start: positive oder negative Zahl;
}

Beispiel

Lassen Sie uns den Elementen im Grid Startpositionen 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;
}
#elem2 {
	grid-row-start: 2;
}
#elem3 {
	grid-row-start: 3;
}

Beispiel

Und jetzt lassen Sie uns in der Eigenschaft grid-row-start negative Zahlen angeben. Jetzt 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;
}
#elem2 {
	grid-row-start: -2;
}
#elem3 {
	grid-row-start: -3;
}

Beispiel

Lassen Sie uns den ersten Block zwei Zeilen einnehmen lassen. Dafür müssen wir die Eigenschaften grid-row-start und grid-row-end kombinieren:

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

Siehe auch

die Eigenschaft grid-row-end,
die die Endposition eines Elements im Grid entlang der Zeilen festlegt
die Eigenschaft grid-row,
die die Start- und Endposition 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