row-gap CSS property

Probieren Sie es aus

row-gap: 0;

row-gap: 1ch;

row-gap: 1em;

row-gap: 20px;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Syntax

/* Keyword value */
row-gap: normal;

/* <length-percentage> value */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;
row-gap: 10%;
row-gap: calc(10% - 6px);

/* <line-width> values */
row-gap: thin;
row-gap: medium;
row-gap: thick;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;

Werte

Diese Eigenschaft wird durch einen einzelnen Wert aus der folgenden Liste angegeben:

normal

Wird in mehrspaltigen Layouts zu 1em aufgelöst, andernfalls zu 0. Dies ist der Standardwert.

<line-width>

Legt die Größe des Abstands mit den Schlüsselwörtern thin, medium oder thick oder mit einem positiven <length>-Wert fest.

<length-percentage>

Legt einen nicht negativen <length>- oder <percentage>-Wert fest. Prozentwerte beziehen sich auf die Blockgröße der Content-Box oder auf 0.

Beschreibung

Die Eigenschaft row-gap legt die Größe des Abstands zwischen den Zeilen eines Elements fest. Dieser Abstand kann als dekoratives Element eine sichtbare Trennlinie enthalten. Befindet sich zwischen den Zeilen eine Linie, erscheint sie in der Mitte des Abstands, beeinflusst dessen Größe aber nicht. Solche dekorativen Linien können dem ansonsten „leeren Raum“ mit der Eigenschaft row-rule oder der Kurzschreibweise rule hinzugefügt werden.

Die unter CSS-Abstände definierte Eigenschaft kann in mehrspaltigen Layouts, Flexbox-Layouts und Grid-Layouts verwendet werden. row-gap und die Eigenschaft column-gap können in dieser Reihenfolge auch mit der Kurzschreibweise gap festgelegt werden. Die Eigenschaft row-gap hat die Eigenschaft grid-row-gap ersetzt, die auf CSS-Grid-Layouts beschränkt war. grid-row-gap ist nun ein Alias für row-gap.

Die Eigenschaft legt einen Abstand fester Länge zwischen Elementen in einem Container fest und trennt dabei Boxen entlang der Blockachse des Containers. Negative Werte sind ungültig. Der Standardwert normal wird bei mehrspaltigen Containern zu 1em und überall sonst zu 0 aufgelöst. Weitere Informationen zu Abständen je nach Layouttyp finden Sie unter CSS-Abstände definieren.

Prozentwerte werden relativ zur Größe der Content-Box des Containerelements entlang seiner Blockachse aufgelöst, wenn diese Größe feststeht; andernfalls werden sie zu 0 aufgelöst. Eine Ausnahme gilt für Grid-Layouts: Dort werden zyklische Prozentgrößen bei der Ermittlung der Beiträge zur intrinsischen Größe zu null aufgelöst, beim Layout der Inhalte jedoch relativ zur Content-Box des Elements. Weitere Informationen finden Sie unter Abstandswerte als Prozentwerte angeben.

In Grid-Layouts wirkt der Abstand so, als hätten die Grid-Linien zwischen den Zeilen eine Dicke entsprechend dem Eigenschaftswert: Der Grid-Track zwischen zwei Zeilen ist der Raum zwischen den Gutter-Bereichen, die diese Zeilen begrenzen. Bei der Größenberechnung der Tracks wird jeder Gutter-Bereich als zusätzlicher, leerer Track fester Größe behandelt. Jedes Grid-Element, das sich über mehr als eine Zeile erstreckt, überspannt auch diesen Track. Obwohl der Abstand bei der Größenberechnung als leer gilt, kann er eine row-rule enthalten.

Formale Definition

Formale Syntax

row-gap = 
  normal                     |
  <length-percentage [0,∞]>  |
  <line-width>               

<length-percentage> = 
  <length>      |
  <percentage>  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

Beispiele

Flexbox-Layout

Dieses Beispiel zeigt, wie mit der Eigenschaft row-gap horizontaler Abstand zwischen benachbarten Zeilen von Flex-Elementen erzeugt wird. Es zeigt außerdem, dass die Größe der Zeilenlinie die Größe von row-gap nicht beeinflusst.

HTML

Wir fügen sechs Elemente in ein Containerelement ein:

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

Wir setzen display auf flex und flex-flow auf row wrap. Dadurch entsteht ein Flex-Container mit Zeilen von Flex-Elementen, die bei Bedarf in neue Zeilen umbrechen. Außerdem begrenzen wir width auf 300px. Mit row-rule fügen wir eine 30px breite, gestrichelte magentafarbene Linie in der Mitte des Abstands hinzu.

Für den Flex-Container setzen wir row-gap auf 20px, um zwischen benachbarten Flex-Zeilen einen Abstand von 20px zu erzeugen.

Wir geben den Flex-Elementen außerdem eine Hintergrundfarbe und machen die meisten davon halbtransparent. So wird sichtbar, dass die Linie unter den Flex-Elementen zu sehen ist, wenn sie breiter als der Abstand ist.

#flexbox {
  display: flex;
  flex-flow: row wrap;
  width: 300px;
  row-rule: 30px dashed magenta;

  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: #00ff0033;
  flex: 1 1 100px;
  height: 50px;
}
#flexbox > div:nth-of-type(3n-1) {
  background-color: lime;
}

Ergebnis

Um einen vertikalen Abstand zwischen Flex-Elementen festzulegen, geben Sie für die Eigenschaft column-gap einen Wert ungleich null an. Optional können Sie row-gap und column-gap gemeinsam mit der Kurzschreibweise gap festlegen.

Grid-Layout

Dieses Beispiel zeigt die Verwendung der Eigenschaft row-gap mit einem <percentage>-Wert in einem Grid-Layout.

HTML

Wir fügen fünf Elemente in ein Containerelement ein:

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

Wir setzen die Eigenschaft display auf grid, height auf 240px, width auf 350px und grid-template-rows auf repeat(3, 1fr). So entsteht ein 350px breiter Grid-Container mit drei Spalten und so vielen Zeilen wie nötig. Jede Zeile ist 100px hoch, wie durch die Eigenschaft grid-template-rows festgelegt.

row-gap wird auf 5% gesetzt. Die Höhe des Containers beträgt 240px. Der Wert 5% erzeugt einen 12px hohen Zeilenabstand. Damit bleiben 216px für drei Zeilen mit Grid-Elementen, sodass jede Zeile 72px hoch ist.

#grid {
  display: grid;
  height: 240px;
  width: 350px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 150px 1fr;

  row-gap: 5%;
}

body {
  padding: 1em;
}

#grid > div {
  outline: 1px solid green;
  background-color: lime;
}
@layer no-support {
  @supports not (row-gap: 5%) {
    body::before {
      content: "Your browser doesn't support percent values";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• column-gap
• row-rule
• rule
• gap
• CSS-Abstände definieren
• Grundkonzepte des Grid-Layouts: Gutter
• Modul CSS-Abstände