W3docs
de
Anmelden

CSS grid-row-gap-Eigenschaft

The grid-row-gap CSS property defines the size of the gap between the rows. See property description, values and examples.

Die CSS-Eigenschaft grid-row-gap definiert die Größe des Abstands zwischen den Zeilen eines Grid-Containers. Die Abstandsbreite kann mit einem Längenwert angegeben werden.

Sie kann in Pixeln (px) oder Prozent (%) angegeben werden.

info

Die Eigenschaft row-gap ist die moderne Kurzschreibweise, die sowohl grid-row-gap als auch grid-column-gap festlegt. Während row-gap bevorzugt wird, ist grid-row-gap weiterhin gültig, um den Zeilenabstand explizit anzusprechen.

Anfangswert0
Anwendbar aufGrid-Container.
VererbbarNein.
AnimierbarJa. Der Abstand zwischen den Zeilen ist animierbar.
VersionCSS Grid Layout Module Level 1
DOM-Syntaxobject.style.gridRowGap = "30px";

Syntax

CSS grid-row-gap Syntax

grid-row-gap: normal | length;

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

CSS grid-row-gap Codebeispiel

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

Ergebnis

CSS grid-row-gap another example

Hier wird der Abstand zwischen den Zeilen als 0 festgelegt. Im nächsten Beispiel beträgt der Abstand zwischen den Zeilen 40px.

Beispiel für die grid-row-gap-Eigenschaft in Pixeln angegeben:

CSS grid-row-gap weiteres Codebeispiel

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

Beispiel für die grid-row-gap-Eigenschaft in Prozent angegeben:

Beispiel für die grid-row-gap-Eigenschaft in Prozent angegeben:

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

Werte

WertBeschreibungTesten
normalVerwendet den standardmäßigen Abstand zwischen den Zeilen des Browsers. Dies ist der Standardwert dieser Eigenschaft.
lengthDer Abstand zwischen den Zeilen wird in px oder Prozent angegeben. Negative Werte sind nicht erlaubt. Standardwert ist 0.Testen »
initialLegt fest, dass die Eigenschaft ihren Standardwert verwendet.
inheritErbt die Eigenschaft vom Elternelement.

Practice

Übung

Was ist der Zweck der 'grid-row-gap'-Eigenschaft in CSS?