Eigenschaft grid-row
Die Eigenschaft grid-row legt
die Start- und Endposition eines Elements
im Grid oder Raster entlang der Zeilen fest. Als Werte der Eigenschaft können
positive oder negative Zahlen angegeben werden,
getrennt durch einen Schrägstrich. Die erste Zahl gibt die
Startposition des Elements an, die zweite die Endposition.
Wenn eine positive Zahl als Wert angegeben wird,
wird die Position des Elements von oben
nach unten gezählt. Bei Angabe einer negativen Zahl wird das Element
in umgekehrter Reihenfolge platziert,
d.h. von unten nach oben.
Syntax
Selektor {
grid-row: Startposition / Endposition;
}
Beispiel
Lassen Sie uns den Elementen im Grid Start- und 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;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
}
:
Beispiel
Lassen Sie uns nun in der Eigenschaft grid-row
negative Zahlen angeben:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: -1 / -2;
}
#elem2 {
grid-row: -2 / -3;
}
#elem3 {
grid-row: -3 / -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: 1 / 3; /* zwei Zeilen */
}
#elem2 {
grid-row: 1 / 2;
}
#elem3 {
grid-row: 2 / 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: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
}
#elem4 {
grid-row: 1 / 4;
}
:
Beispiel
Kombinieren wir die Eigenschaften grid-row
und grid-column:
<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 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 3;
}
#elem2 {
grid-row: 1 / 2;
}
#elem3 {
grid-row: 1 / 2;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
:
Beispiel
Lassen Sie uns nun erreichen, dass der erste und fünfte Block die gesamte Zeile einnehmen, der zweite Block - zwei Zeilen und zwei Spalten, und der dritte und vierte Block - eine Zeile und zwei Spalten:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 4;
grid-column: 1 / 2;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
#elem4 {
grid-row: 3 / 3;
grid-column: 2 / 4;
}
#elem5 {
grid-row: 4 / 5;
grid-column: 1 / 4;
}
:
Siehe auch
-
die Eigenschaft
grid-column,
die die Start- und Endposition eines Elements im Grid entlang der Spalten festlegt -
die Eigenschaft
grid-row-start,
die die Startposition eines Elements im Grid entlang der Zeilen festlegt -
die Eigenschaft
grid-row-end,
die die Endposition eines Elements im Grid entlang der Zeilen festlegt
