CSS grid-row-Eigenschaft

Die grid-row-Eigenschaft wird verwendet, um anzugeben, auf welcher Reihenlinie das Element beginnen und auf welcher es enden soll. Sie ist eine Kurzschreibweise für die folgenden Eigenschaften:

Anfangswert	auto auto
Anwendbar auf	Grid-Elemente.
Vererbt	Nein.
Animierbar	Ja. Elemente sind animierbar.
Version	CSS Grid Layout Module Level 1
DOM-Syntax	object.style.gridRow = "1 / span 2";

Syntax

CSS grid-row-Syntax

css

grid-row: grid-row-start / grid-row-end;

Beispiel für die grid-row-Eigenschaft:

CSS grid-row-Codebeispiel

html

<!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>

Try it Yourself »

Ergebnis

CSS grid-row with two items

Beispiel für die grid-row-Eigenschaft mit der Angabe span 2:

CSS grid-row-Beispiel mit zwei Elementen

html

<!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 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>7</div>
    </div>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung
grid-row-start	Gibt die Startposition des Elements an.
grid-row-end	Gibt die Endposition des Elements und die Anzahl der zu überbrückenden Reihen an.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Was gibt die 'grid-row'-Eigenschaft in CSS an?

Sie gibt die Größe und Position eines Grid-Elements innerhalb der Grid-Reihe anSie gibt den Schriftstil des Grids anSie gibt die Größe und Position eines Grid-Elements innerhalb der Grid-Spalte anSie ermöglicht es einem Element, mehr als eine Grid-Reihe einzunehmenSie gibt die Hintergrundfarbe des Grids an

CSS grid-row-Eigenschaft ​

Syntax ​

Beispiel für die grid-row-Eigenschaft: ​

Ergebnis ​

Beispiel für die grid-row-Eigenschaft mit der Angabe span 2: ​

Werte ​