CSS grid-row Eigenschaft

Die CSS-Eigenschaft grid-row legt die Position und Größe eines Grid-Elements innerhalb der Zeilen eines CSS Grid fest. Sie ist eine Kurzschreibweise, die grid-row-start und grid-row-end in einer Deklaration zusammenfasst und steuert, an welcher Zeilenlinie das Element beginnt und an welcher es endet.

Ein Grid wird durch horizontale Zeilenlinien unterteilt, die ab 1 am oberen Rand nummeriert werden. grid-row weist ein Element an, von einer Startlinie bis zu einer Endlinie zu spannen. Für unabhängige Steuerung jeder Kante können die Langform-Eigenschaften direkt verwendet werden:

grid-row-start — die Linie, an der das Element beginnt.
grid-row-end — die Linie, an der das Element endet.

grid-row: 1 / 3 entspricht also genau der Schreibweise grid-row-start: 1; grid-row-end: 3.

Initialwert	`auto` / `auto`
Gilt für	Grid-Elemente
Vererbt	Nein
Animierbar	Ja
Version	CSS Grid Layout Module Level 1
DOM-Syntax	`object.style.gridRow = "1 / span 2"`

Syntax

grid-row: <start-line> / <end-line>;

Der Wert vor dem Schrägstrich ist die Startlinie; der Wert danach ist die Endlinie. Die Endlinie ist exklusiv — das Element füllt Tracks bis zu dieser Linie, schließt sie aber nicht ein. Zeilennummern, span und benannte Linien können beliebig kombiniert werden:

/* Explicit line numbers */
grid-row: 2 / 4;       /* start at line 2, end at line 4 → spans rows 2 and 3 */

/* Span keyword */
grid-row: 2 / span 2;  /* start at line 2, span 2 rows */
grid-row: span 3;       /* span 3 rows from wherever auto-placement puts the item */

/* Negative line number */
grid-row: 1 / -1;      /* from first line to last line (full height) */

/* Single value — sets start only; end defaults to auto (one row) */
grid-row: 3;

Wie Zeilenlinien gezählt werden

Ein Grid mit drei expliziten Zeilen hat vier Zeilenlinien: die Linien 1, 2, 3 und 4. Positive Zahlen werden von oben gezählt; negative Zahlen zählen von unten, sodass -1 immer die letzte explizite Linie ist. Damit ist grid-row: 1 / -1 eine zuverlässige Methode, um die volle Höhe des expliziten Grids zu überspannen, unabhängig davon, wie viele Zeilen es hat.

Wenn eine Linie referenziert wird, die nicht existiert — zum Beispiel grid-row: 1 / 6 bei einem drei-zeiligen Grid — erstellt der Browser implizite Zeilen, um die Anforderung zu erfüllen. Diese impliziten Zeilen erhalten ihre Größe durch grid-auto-rows.

Grundlegendes Beispiel: Ein Element in einer bestimmten Zeile platzieren

Das Element mit der Klasse .box wird durch die Angabe grid-row: 2 / 3 in die zweite Zeile verschoben. Die erste Zeile bleibt leer, und die übrigen Elemente fließen in die automatisch platzierten Zellen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto 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: 2 / 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row 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>7</div>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

![CSS grid-row mit zwei Elementen](/uploads/media/default/0001/04/90bf26fe77ccc66f3b0039d2cc9a0232626ef7ca.png "CSS grid-row example result" =420x)

Mehrere Zeilen mit `span` überspannen

Mit grid-row: span 2 nimmt ein Element zwei Zeilen ein, ohne genaue Zeilennummern angeben zu müssen. Der Auto-Placement-Algorithmus fügt das Element dort ein, wo es passt, und streckt es um zwei Zeilen nach unten. Nachfolgende Elemente werden in die nächsten verfügbaren Zellen verschoben.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto 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: span 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row span 2 example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div class="box">4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
  </body>
</html>

Probier es selbst »

Wann `grid-row` verwendet werden sollte

grid-row ist dann die richtige Wahl, wenn ein Element einen bestimmten vertikalen Bereich des Grids einnehmen soll, statt der einzelnen Zelle, die die automatische Platzierung vergeben würde. Häufige Anwendungsfälle:

Vollhohe Seitenleiste oder Hero-Panel: grid-row: 1 / -1 streckt ein Element von der ersten bis zur letzten expliziten Zeilenlinie.
Hervorgehobene Kachel in einem Karten-Grid: grid-row: span 2 macht eine Karte optisch höher als ihre Nachbarn.
An einer expliziten Linie fixieren: grid-row: 2 / 4 hält ein Element an einer festen vertikalen Position, auch wenn sich der umgebende Inhalt ändert.

Für die horizontale Platzierung wird die passende Eigenschaft grid-column verwendet. Um beide Achsen gleichzeitig festzulegen, fasst die Kurzschreibweise grid-area sowohl grid-row als auch grid-column in einer einzigen Deklaration zusammen. Informationen dazu, wie das Grid automatisch Zeilen erstellt, finden sich unter grid-template-rows und grid-auto-rows.

Achtung: Zeilennummern zählen die Linien zwischen den Tracks, nicht die Tracks selbst. Ein Grid mit drei Zeilen hat vier Zeilenlinien (1–4). Negative Zahlen zählen vom Ende: -1 ist die letzte explizite Linie, -2 die vorletzte usw. Wenn grid-row eine Linie außerhalb des expliziten Grids referenziert, fügt der Browser implizite Zeilen hinzu, die durch grid-auto-rows dimensioniert werden.

Werte

Wert	Beschreibung
`<line>`	Eine ganze Zahl (positiv oder negativ), die auf eine bestimmte Zeilenlinie im Grid verweist.
`span <n>`	Das Element überspannt `n` Zeilen-Tracks. Kann als Start- oder Endwert verwendet werden.
`auto`	Standard — Platzierung und Span werden durch den Auto-Placement-Algorithmus bestimmt (eine Zeile).
`initial`	Setzt die Eigenschaft auf ihren Initialwert zurück (`auto`).
`inherit`	Erbt den Wert vom übergeordneten Element.

Übung

Was legt die CSS-Eigenschaft 'grid-row' fest?

Sie legt die Größe und Position eines Grid-Elements innerhalb der Grid-Zeile festSie legt den Schriftstil des Grids festSie legt die Größe und Position eines Grid-Elements innerhalb der Grid-Spalte festSie ermöglicht es einem Element, mehr als eine Grid-Zeile einzunehmenSie legt die Hintergrundfarbe des Grids fest