row-gap (grid-row-gap)

Die CSS-Eigenschaft row-gap legt die Größe der Zwischenräume (gutter) zwischen den Grid-Reihen eines Elements fest.

CSS Grid Layout definierte zunächst die Eigenschaft grid-row-gap}. Diese vorangestellte Eigenschaft wird durch row-gap ersetzt. Um jedoch Browser zu unterstützen, die grid-row-gap und nicht row-gap für grid implementiert haben, müssen Sie die Eigenschaft mit Präfix verwenden, wie im obigen interaktiven Beispiel.

Syntax

/* <length> Längen-Werte */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/* <percentage> Prozent-Werte*/
row-gap: 10%;

/* Globale Werte */
row-gap: inherit;
row-gap: initial;
row-gap: unset;

Values

<length-percentage>
Ist die Breite des Abstands (gutter) zwischen den Reihen. <percentage> Werte sind relativ zur Dimension des Elements.

Formal syntax

normal | <length-percentage>
wobei 
<length-percentage> = <length> | <percentage>

Examples

Flex layout

Experimental

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

HTML

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

CSS

#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}

Result

Grid layout

HTML

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

CSS

#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Result

Specifications

Spezifikation Status Bemerkung
CSS Box Alignment Module Level 3
Die Definition von 'row-gap' in dieser Spezifikation.		 Arbeitsentwurf Erstdefinition

Initialwertnormal
Anwendbar aufmulti-column elements, flex containers, grid containers
VererbtNein
Prozentwertebeziehen sich auf die entsprechende Dimension des Inhaltsbereichs
Berechneter Wertas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
AnimationstypLängenangabe, Prozentsatz oder calc();

Browser-Kompatibilität

Support in Flex layout

BCD tables only load in the browser

Support in Grid layout

BCD tables only load in the browser

Siehe auch