W3docs
de
Anmelden

CSS grid-row-gap Eigenschaft

Erfahren Sie, wie CSS grid-row-gap den Abstand zwischen Grid-Zeilen festlegt, mit Syntax, Werten, Live-Beispielen und Tipps zum modernen row-gap-Alias.

Die CSS-Eigenschaft grid-row-gap legt die Größe des Abstands (des Zwischenraums) zwischen den Zeilen eines Grid-Containers fest. Sie fügt Platz zwischen den Zeilen ein — niemals vor der ersten oder nach der letzten Zeile — sodass keine unerwarteten äußeren Abstände entstehen.

Diese Eigenschaft wirkt sich nur auf Elemente aus, deren display auf grid oder inline-grid gesetzt ist. Auf Flexbox- oder Mehrspalten-Layouts hat sie keine Auswirkung; verwenden Sie dort stattdessen die standardmäßige Eigenschaft column-gap oder das universelle gap-Kurzschreibweise.

Info

grid-row-gap ist nun ein Alias für die standardmäßige Eigenschaft row-gap, die für Grid-, Flexbox- und Mehrspalten-Layouts funktioniert. Browser behandeln sie innerhalb eines Grid-Kontexts identisch. Bevorzugen Sie row-gap (oder das grid-gap-Kurzschreibweise, das beide Achsen gleichzeitig setzt) in neuem Code. grid-row-gap bleibt gültig und wird aus Gründen der Abwärtskompatibilität beibehalten.

Kurzübersicht

Ausgangswertnormal (wird im Grid als 0 behandelt)
Gilt fürGrid-Container
VererbbarNein
AnimierbarJa
SpezifikationCSS Grid Layout Module Level 1
DOM-Syntaxelement.style.gridRowGap = "30px"

Wann sollte man es verwenden?

Greifen Sie auf grid-row-gap zurück, wenn Sie vorhersehbare vertikale Abstände zwischen Grid-Zeilen wünschen, ohne sich auf Abstände bei einzelnen Grid-Elementen zu verlassen. Margins zwischen Grid-Elementen sind umständlich — sie kollabieren ungleichmäßig, fügen Platz an den Rändern hinzu und sind schwieriger global anzupassen. Ein Zeilenabstand hingegen befindet sich nur zwischen den Zeilen und hält die äußeren Ränder des Grids bündig, was das Rechnen mit Abständen vereinfacht.

Kombinieren Sie ihn mit grid-column-gap für horizontale Abstände, oder ersetzen Sie beide durch die grid-gap-Kurzschreibweise, wenn Sie Zeilen- und Spaltenabstände gleichzeitig setzen möchten.

Syntax

/* keyword */
grid-row-gap: normal;

/* absolute length */
grid-row-gap: 20px;
grid-row-gap: 1.5em;

/* percentage of the container's block size */
grid-row-gap: 10%;

/* global values */
grid-row-gap: inherit;
grid-row-gap: initial;
grid-row-gap: unset;

Werte

WertBeschreibung
normalDer Standardabstand des Browsers. Wird innerhalb eines Grid-Containers zu 0 aufgelöst.
<length>Ein nicht-negativer CSS-Längenwert (px, em, rem, vw usw.).
<percentage>Ein nicht-negativer Prozentwert, der gegen die Block-Achse (Höhe) des Grid-Containers aufgelöst wird.
inheritÜbernimmt den berechneten Wert vom Elternelement.
initialSetzt die Eigenschaft auf ihren Ausgangswert zurück (normal).
unsetVerhält sich wie inherit, wenn die Eigenschaft vererbbar ist, andernfalls wie initial.

Beispiele

Kein Zeilenabstand (Standard)

Mit grid-row-gap: 0 liegen die Zeilen direkt nebeneinander ohne vertikalen Zwischenraum. Nur grid-column-gap trennt Elemente horizontal voneinander.

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

![CSS grid-row-gap Beispiel ohne Zeilenabstand](/uploads/media/default/0001/04/4123ae945c3b6e7b25f0fc5911ae459f604c3c1c.png "CSS grid-row-gap Beispiel ohne Zeilenabstand" =420x)

Fester Pixel-Abstand

Durch das Setzen von grid-row-gap: 40px wird zwischen jedem Zeilenpaar ein 40-Pixel-Zwischenraum eingefügt. Der Spaltenabstand bleibt separat und wird unabhängig durch grid-column-gap gesteuert.

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

Prozentualer Abstand

Ein Prozentwert wird gegen die Block-Größe (Höhe) des Grid-Containers aufgelöst. Das bedeutet, der Abstand wächst proportional, wenn der Container höher wird, was für fluide, seitenverhältnissensitive Layouts nützlich sein kann. Für die meisten Inhaltslayouts ist ein fester px- oder rem-Wert besser vorhersehbar.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-row-gap: 15%;
        grid-column-gap: 3%;
        background-color: grey;
        padding: 40px;
      }
      .grid-container > div {
        background-color: white;
        text-align: center;
        padding: 25px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>
Probier es selbst »

Migration zur modernen row-gap-Eigenschaft

Die CSS Grid-Spezifikation wurde später an die Mehrspalten- und Flexbox-Abstandskonventionen angeglichen, wobei grid-row-gap in row-gap umbenannt wurde. Die beiden sind innerhalb eines Grid-Kontexts austauschbar, aber row-gap funktioniert auch in Flexbox- und Mehrspalten-Containern. Die Migration ist eine einzeilige Umbenennung:

/* Legacy — still valid, but prefer row-gap in new code */
grid-row-gap: 20px;

/* Modern equivalent */
row-gap: 20px;

/* Shorthand: sets row-gap and column-gap at once */
gap: 20px 10px;   /* row-gap: 20px; column-gap: 10px */
gap: 20px;        /* both row-gap and column-gap: 20px */

Alle wichtigen Browser unterstützen row-gap für Grid seit Anfang 2020, sodass es keinen praktischen Kompatibilitätsgrund gibt, den Namen grid-row-gap in neuen Projekten weiterhin zu verwenden.

Häufige Fallstricke

  • Prozentuale Abstände und intrinsische Höhe. Wenn der Grid-Container keine explizite height hat, kann der Browser einen prozentualen Zeilenabstand nicht auflösen, bis er die Containerhöhe kennt — die wiederum vom Inhalt abhängt. Diese zirkuläre Abhängigkeit kann dazu führen, dass der Abstand zu 0 aufgelöst wird. Verwenden Sie px oder rem, sofern der Container keine feste Höhe hat.
  • Negative Werte sind nicht erlaubt. Im Gegensatz zu Margins akzeptiert grid-row-gap nur Null- oder positive Werte. Der Versuch, einen negativen Abstand zu setzen, ist ungültig und die Deklaration wird ignoriert.
  • Der Abstand fügt keinen äußeren Raum hinzu. grid-row-gap fügt Platz nur zwischen Zeilen hinzu. Wenn Sie Innenabstand rund um das gesamte Grid benötigen, verwenden Sie die padding-Eigenschaft des Containers.
  • Überspannende Elemente sind nicht betroffen. Ein Element, das mit grid-row: span 2 mehrere Zeilen überspannt, profitiert dennoch von dem Abstand zwischen diesen Zeilen als Teil seines zugewiesenen Platzes.

Verwandte Eigenschaften

  • grid-column-gap — legt den Abstand zwischen Grid-Spalten fest.
  • grid-gap — Kurzschreibweise, die sowohl grid-row-gap als auch grid-column-gap auf einmal setzt.
  • column-gap — die moderne, layout-unabhängige Eigenschaft für Spaltenabstände.
  • grid-template-columns — definiert die Spaltenspuren, zwischen denen der Abstand liegt.
  • grid-template-rows — definiert die Zeilenspuren, die durch diesen Abstand getrennt werden.
  • grid-auto-rows — steuert die Größe implizit erstellter Zeilen.

Übungen

Übung
Was ist der Zweck der Eigenschaft 'grid-row-gap' in CSS?
Was ist der Zweck der Eigenschaft 'grid-row-gap' in CSS?
Was this page helpful?