CSS grid-row-end Eigenschaft

Die CSS-Eigenschaft grid-row-end legt fest, wo ein Grid-Element entlang der Block-Achse (Zeilenachse) endet. Man kann eine Zeilenlinie angeben, bei der das Element stoppen soll, einen Span, der bestimmt, wie viele Zeilen das Element überspannen soll, oder auto, damit der Browser die Platzierung automatisch vornimmt. Zusammen mit grid-row-start definiert die Eigenschaft die Block-Start- und Block-End-Kanten des Grid-Bereichs des Elements.

Nummerierung der horizontalen Grid-Linien

Ein Grid wird durch nummerierte Linien begrenzt, nicht durch die Tracks (Zeilen) selbst. Ein Grid mit drei Zeilen besitzt vier horizontale Linien: Linie 1 verläuft entlang der oberen Kante, Linie 4 entlang der unteren Kante.

line:  1 ─────────────────────
         |  row 1             |
line:  2 ─────────────────────
         |  row 2             |
line:  3 ─────────────────────
         |  row 3             |
line:  4 ─────────────────────

grid-row-end bezieht sich auf eine dieser Linien:

grid-row-end: 3 lässt das Element an Linie 3 enden — es belegt Zeile 1 und 2, wenn es bei Linie 1 beginnt.
grid-row-end: span 2 lässt das Element 2 Zeilen nach dem Startpunkt enden, unabhängig von der absoluten Liniennummer.

Man kann auch mit negativen Zahlen vom Ende her zählen: -1 ist die letzte Linie (die untere Kante), -2 ist die darüber liegende. Damit erreicht grid-row-end: -1 immer die untere Kante des expliziten Grids, unabhängig davon, wie viele Zeilen es hat — praktisch für Elemente, die die gesamte Höhe einnehmen sollen.

Tipp: Der Wert beschreibt nur, wo das Element stoppt. Wo es beginnt, wird durch grid-row-start (oder Auto-Platzierung) festgelegt. Die Kurzschreibweise grid-row setzt beides gleichzeitig — zum Beispiel platziert grid-row: 1 / 3 das Element von Zeilenlinie 1 bis Zeilenlinie 3 und überspannt dabei zwei Zeilen.

Anfangswert	auto
Gilt für	Grid-Elemente.
Vererbbar	Nein.
Animierbar	Ja.
Version	CSS Grid Layout Module Level 1
DOM-Syntax	`object.style.gridRowEnd = "4";`

Syntax

grid-row-end: auto | <integer> | span <integer> | inherit | initial | unset;

Beispiel: Liniennummerwert

Der Standardwert auto lässt ein Element eine einzige Zeile einnehmen. Wird grid-row-end: 3 für ein Element gesetzt, das bei Linie 1 beginnt (der Standard), überspannt es die ersten beiden Zeilen — die untere Kante des Elements liegt auf Linie 3.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row-end: 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

![CSS grid-row-end mit mehreren Elementen](/uploads/media/default/0001/04/260b91923438edb01b18d93650fd3050e244dd52.png "CSS grid-row-end example" =420x)

Element 1 endet an Gitterlinie 3 und erstreckt sich damit über die ersten beiden Zeilen, während die übrigen Elemente um es herum angeordnet werden. Im nächsten Beispiel wird derselbe Effekt mit dem Schlüsselwort span anstelle einer festen Liniennummer erzielt.

Beispiel: Span-Wert

Die Verwendung von span ist praktisch, wenn es darauf ankommt, wie viele Zeilen ein Element überspannt, anstatt auf welcher genauen Linie es endet. grid-row-end: span 3 bedeutet, dass das Element drei Zeilen nach unten vom Startpunkt aus reicht.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row-end: span 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div class="box">2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Probier es selbst »

Mit grid-row-end: span 3 behält Element 2 seine automatische Startlinie und erstreckt sich unabhängig von der absoluten Liniennummer drei Zeilen nach unten.

Werte

Wert	Beschreibung
`auto`	Das Element überspannt eine einzelne Zeile (Auto-Platzierung). Dies ist der Standardwert.
`span n`	Das Element endet `n` Zeilen nach seiner Startlinie.
`<integer>`	Eine positive oder negative Zeilenliniennummer, bei der das Element enden soll. Negative Ganzzahlen zählen vom Ende des Grids (`-1` = letzte Linie).
`initial`	Setzt die Eigenschaft auf ihren Standardwert (`auto`).
`inherit`	Erbt den Wert vom übergeordneten Element.
`unset`	Entfernt den aktuellen Wert und kehrt zum vererbten oder Anfangswert zurück.

Häufige Fehlerquellen

span ist relativ; Liniennummern sind absolut. grid-row-end: 3 stoppt immer an Linie 3; grid-row-end: span 3 stoppt drei Zeilen nach der Startlinie. Diese Verwechslung ist der häufigste Fehler bei der Grid-Platzierung.
Ende vor dem Start? Der Browser tauscht sie. Wenn grid-row-end zu einer Linie vor grid-row-start aufgelöst wird, tauscht der Browser die beiden Werte automatisch aus, damit der Bereich gültig bleibt.
Nur grid-row-end zu setzen, verschiebt den Start nicht. Die Startlinie wird weiterhin automatisch platziert. Um beide Kanten festzusetzen, verwendet man die Kurzschreibweise grid-row (grid-row: 1 / 3) oder setzt zusätzlich grid-row-start.
Negative Werte erreichen nur das explizite Grid. -1 zeigt auf die letzte Linie des durch grid-template-rows definierten Grids; es erstreckt sich nicht auf implizit erstellte Zeilen.
Explizite width/height-Angaben sind meist unnötig. Das Grid-Layout bemisst Elemente automatisch innerhalb der ihnen zugewiesenen Zellen.

Übung

Was bewirkt die CSS-Eigenschaft 'grid-row-end'?

Sie definiert die Linie, an der die Endseite eines Grid-Elements im Grid horizontal endet.Sie definiert die Linie, an der die Endseite eines Grid-Elements im Grid vertikal endet.Sie richtet die Elemente im Grid vertikal aus.Sie steuert den Abstand zwischen zwei Zeilen im Grid.