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

Die gap CSS Eigenschaft erzeugt einen Abstand zwischen Zeilen und Spalten. Es ist eine gekürtzte Version für row-gap und column-gap.

CSS Grid Layout initially defined the grid-gap property. This prefixed property is being replaced by gap. However, in order to support browsers that implemented grid-gap and not gap for grid, you will need to use the prefixed property as in the interactive example above.

Syntax

/* One <length> value */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* One <percentage> value */
gap: 16%;
gap: 100%;

/* Two <length> values */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* One or two <percentage> values */
gap: 16% 100%;
gap: 21px 82%;

/* calc() values */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/* Global values */
gap: inherit;
gap: initial;
gap: unset;

This property is specified as a value for <'row-gap'> followed optionally by a value for <'column-gap'>. If <'column-gap'> is omitted, it’s set to the same value as <'row-gap'>.

<'row-gap'> and <'column-gap'> are each specified as a <length> or a <percentage>.

Values

<length>
Is the width of the gutter separating the grid lines.
<percentage>
Is the width of the gutter separating the grid lines, relative to the dimension of the element.

Formal syntax

<'row-gap'> <'column-gap'>?

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;
  gap: 20px 5px;
}

#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></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

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

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

Result

Multi-column layout

HTML

<p class="content-box">
  This is some multi-column text with a 40px column
  gap created with the CSS <code>gap</code> property.
  Don't you think that's fun and exciting? I sure do!
</p>

CSS

.content-box {
  column-count: 3;
  gap: 40px;
}

Result

Specifications

Specification Status Comment
CSS Box Alignment Module Level 3
Die Definition von 'gap' in dieser Spezifikation.
Arbeitsentwurf Initial definition

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufGridcontainer
VererbtNein
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
  • row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animationstypwie die jeweiligen Kurzschreibweisen:
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Browser compatibility

Support in Flex layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Flex LayoutChrome Keine Unterstützung NeinEdge ? Firefox 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 NeinEdge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 63Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

Support in Grid layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox 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-gap
Vollständige Unterstützung 29
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-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-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-gap
Keine Unterstützung 40 — 59
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-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-gap
Vollständige Unterstützung 28
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-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-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-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-gap
Vollständige Unterstützung 29
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-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 Mobile Keine Unterstützung NeinFirefox 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-gap
Keine Unterstützung 40 — 59
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-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-gap
Vollständige Unterstützung 28
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-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-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-gap
<percentage> values
Experimentell
Chrome Vollständige Unterstützung 66Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Vollständige Unterstützung 53Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 66Chrome Android Vollständige Unterstützung 66Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 47Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
calc() values
Experimentell
Chrome Vollständige Unterstützung 66Edge ? Firefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Vollständige Unterstützung 53Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 66Chrome Android Vollständige Unterstützung 66Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 47Safari 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
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Verwendet einen nicht standardisierten Namen.
Verwendet einen nicht standardisierten Namen.

Support in Multi-column layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Multi-column LayoutChrome Vollständige Unterstützung 66Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 61IE Keine Unterstützung NeinOpera Vollständige Unterstützung 53Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 66Chrome Android Vollständige Unterstützung 66Edge Mobile ? Firefox Android Vollständige Unterstützung 61Opera Android Vollständige Unterstützung 47Safari 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
Kompatibilität unbekannt  
Kompatibilität unbekannt

 

See also

Schlagwörter des Dokuments und Mitwirkende

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