Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

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

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
Medienvisuell
Berechneter Wertas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
AnimationstypLängenangabe, Prozentsatz oder calc();
Kanonische Reihenfolgenach Grammatik

Browser-Kompatibilität

Support in Flex layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Flex LayoutChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 63IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 63Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung

Support in Grid layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Grid LayoutChrome Vollständige Unterstützung 66
Vollständige Unterstützung 66
Vollständige Unterstützung 57
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Vollständige Unterstützung 29
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Deaktiviert From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Vollständige Unterstützung 16
Vollständige Unterstützung 16
Vollständige Unterstützung 16
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Firefox Vollständige Unterstützung 61
Vollständige Unterstützung 61
Vollständige Unterstützung 52
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Keine Unterstützung 40 — 59
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Deaktiviert From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 53
Vollständige Unterstützung 53
Vollständige Unterstützung 44
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Vollständige Unterstützung 28
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Deaktiviert From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Vollständige Unterstützung 10.1
Alternativer Name
Vollständige Unterstützung 10.1
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
WebView Android Vollständige Unterstützung 66
Vollständige Unterstützung 66
Vollständige Unterstützung 57
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Chrome Android Vollständige Unterstützung 66
Vollständige Unterstützung 66
Vollständige Unterstützung 57
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Vollständige Unterstützung 29
Deaktiviert
Deaktiviert From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Vollständige Unterstützung 61
Vollständige Unterstützung 61
Vollständige Unterstützung 52
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Keine Unterstützung 40 — 59
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Deaktiviert From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 47
Vollständige Unterstützung 47
Vollständige Unterstützung 43
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Vollständige Unterstützung 28
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Deaktiviert From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Vollständige Unterstützung 10.3
Alternativer Name
Vollständige Unterstützung 10.3
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap
Samsung Internet Android Vollständige Unterstützung 6.0
Alternativer Name
Vollständige Unterstützung 6.0
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-row-gap

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Verwendet einen nicht standardisierten Namen.
Verwendet einen nicht standardisierten Namen.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: hellschu
Zuletzt aktualisiert von: hellschu,