CSS grid-row-start Eigenschaft

Die CSS-Eigenschaft grid-row-start legt fest, an welcher Grid-Zeilenlinie ein Grid-Element beginnt. Anders ausgedrückt: Sie bestimmt die Block-Start-Linie (die obere Kante in einem links-nach-rechts ausgerichteten horizontalen Layout) des Grid-Bereichs des Elements. Es kann eine Zeilennummer, ein benannter Linienverweis oder das Schlüsselwort span angegeben werden, das das Element über mehrere Zeilen erstreckt.

Diese Eigenschaft wirkt sich nur auf Grid-Elemente aus — direkte Kinder eines Elements, dessen display auf grid oder inline-grid gesetzt ist. Bei allen anderen Elementen wird sie ignoriert. Sie ist die Langform für die Startseite des Kurzschreibweise grid-row und wird zusammen mit grid-row-end verwendet, um die vollständige vertikale Ausdehnung zu definieren. Für die horizontale Platzierung siehe die entsprechende Eigenschaft grid-column-start.

Diese Seite behandelt die Syntax von grid-row-start, alle zulässigen Werte, Praxisbeispiele (Zeilennummern und span) sowie häufige Stolperfallen.

Anfangswert	auto
Gilt für	Grid-Elemente.
Vererbung	Nein.
Animierbar	Ja. Die Platzierung von Elementen ist animierbar.
Version	CSS Grid Layout Module Level 1
DOM-Syntax	object.style.gridRowStart = "5";

Syntax

CSS grid-row-start Syntax

grid-row-start: auto | <line> | span <number> | initial | inherit;

Hinweis: <line> ist ein Platzhalter für eine Zeilennummer oder einen benutzerdefinierten Liniennamen.

Beispiel der grid-row-start-Eigenschaft:

CSS grid-row-start Code-Beispiel

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

Probier es selbst »

Ergebnis

Mit grid-row-start: auto belegt Box 3 einfach ihren natürlichen Platz im Grid-Fluss — auto überlässt dem automatischen Platzierungsalgorithmus des Grids die Entscheidung, wo das Element positioniert wird.

Beispiel der grid-row-start-Eigenschaft, bei dem die dritte Box ab der ersten Zeile beginnt:

CSS grid-row-start Erste-Zeile-Beispiel

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

Probier es selbst »

grid-row-start: 1 fixiert Box 3 an Grid-Zeilenlinie 1, sodass sie unabhängig von ihrer Quellreihenfolge immer in der obersten Zeile beginnt.

Beispiel der grid-row-start-Eigenschaft, bei dem die vierte Box ab der zweiten Zeile beginnt:

CSS grid-row-start Zweite-Zeile-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 20px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box {
        grid-row-start: 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-start property 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>
  </body>
</html>

Probier es selbst »

Beispiel der grid-row-start-Eigenschaft mit dem Schlüsselwort `span`:

CSS grid-row-start span-Beispiel

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

Probier es selbst »

Mit span 2 erstreckt sich Box 3 über zwei Zeilen, beginnend ab ihrer natürlichen Startlinie, und schiebt die nachfolgenden Elemente in die nächsten verfügbaren Zellen. Verwenden Sie span, wenn es darauf ankommt, wie viele Zeilen ein Element belegen soll, und nicht auf welcher genauen Linie es beginnen soll.

Beispiel mit den Werten `initial` und `inherit`:

CSS grid-row-start initial/inherit-Beispiel

.box-initial {
  grid-row-start: initial; /* Resets to the default 'auto' behavior */
}
.box-inherit {
  grid-row-start: inherit; /* Inherits the value from the parent grid item */
}

Hinweis: initial wird in der Regel verwendet, um die Eigenschaft auf ihr Standardverhalten zurückzusetzen, während inherit nützlich ist, wenn ein untergeordnetes Grid-Element das Platzierungsverhalten seines übergeordneten Elements übernehmen soll.

Werte

Wert	Beschreibung	Ausprobieren
auto	Erstreckt sich über eine Zeile. Die genaue Platzierung hängt von den automatischen Platzierungsregeln des Grids ab. Dies ist der Standardwert dieser Eigenschaft.	Ausprobieren »
`<line>`	Gibt eine Zeilennummer oder einen Liniennamen an, ab der das Element beginnen soll.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt den Wert von dem übergeordneten Element.

Hinweis: In Kombination mit grid-row-end muss die Startlinie vor der Endlinie liegen, um überlappende oder zusammengefallene Grid-Elemente zu vermeiden.

Tipps und häufige Stolperfallen

Negative Zeilennummern zählen vom Ende. grid-row-start: -1 verweist auf die letzte Zeilenlinie, was praktisch ist, um ein Element am unteren Rand eines explizit definierten Grids zu verankern.
auto ist nicht dasselbe wie 1. auto überlässt die Platzierung dem automatischen Platzierungsalgorithmus des Grids, während 1 das Element immer an die erste Zeilenlinie fixiert.
Explizit platzierte Elemente können Lücken hinterlassen. Das Fixieren eines Elements an einer bestimmten Linie kann andere Elemente verschieben und leere Zellen erzeugen, abhängig von grid-auto-flow.
Legen Sie zur Klarheit auch die passende Endlinie fest. Wenn Sie den Start mit grid-row-start steuern, macht auch das Setzen von grid-row-end (oder die Verwendung der Kurzschreibweise grid-row) die Ausdehnung des Elements explizit und leichter wartbar.

Browser-Unterstützung

grid-row-start ist Teil des CSS Grid Layouts und wird von allen modernen Browsern unterstützt — Chrome, Firefox, Safari und Edge.

Übungen

Übung

Was legt die grid-row-start-Eigenschaft in CSS fest?

Sie legt die Zeilennummer fest, an der ein Grid-Element beginntSie legt die Zeilennummer fest, an der ein Grid beginnen sollSie markiert den Beginn eines CSS-GridsSie legt die Farbe der Startzeile in einem Grid festSie legt den Liniennamen des Grids fest, an dem das Element beginnt

Syntax

Beispiel der grid-row-start-Eigenschaft:

Ergebnis

Beispiel der grid-row-start-Eigenschaft, bei dem die dritte Box ab der ersten Zeile beginnt:

Beispiel der grid-row-start-Eigenschaft, bei dem die vierte Box ab der zweiten Zeile beginnt:

Beispiel der grid-row-start-Eigenschaft mit dem Schlüsselwort span:

Beispiel mit den Werten initial und inherit:

Werte

Tipps und häufige Stolperfallen

Browser-Unterstützung

Verwandte Eigenschaften

Übungen

Beispiel der grid-row-start-Eigenschaft mit dem Schlüsselwort `span`:

Beispiel mit den Werten `initial` und `inherit`: