W3cubDocs

/CSS

gap

The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

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 definition

Initial value as each of the properties of the shorthand:
Applies to multi-column elements, flex containers, grid containers
Inherited no
Computed value as each of the properties of the shorthand:
  • 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
Animation type as each of the properties of the shorthand:

Formal syntax

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

Examples

Flex layout

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
The definition of 'gap' in that specification.
Working Draft Initial definition

Browser compatibilityUpdate compatibility data on GitHubUpdate compatibility data on GitHubUpdate compatibility data on GitHub

Support in Flex layout

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Supported in Flex Layout 84 84 63 No 70 No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Supported in Flex Layout 84 84 63 No No No

Support in Grid layout

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Supported in Grid Layout 66
66
57
Uses the non-standard name: grid-gap
29
Disabled
Uses the non-standard name: grid-gap
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
16
16
16
Uses the non-standard name: grid-gap
61
61
52
Uses the non-standard name: grid-gap
40 — 59
Disabled
Uses the non-standard name: grid-gap
Disabled 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.
No 53
53
44
Uses the non-standard name: grid-gap
28
Disabled
Uses the non-standard name: grid-gap
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
10.1
10.1
Uses the non-standard name: grid-gap
12
calc() values 66 16 52 No 53 No
<percentage> values 66 16 52 No 53 No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Supported in Grid Layout 66
66
57
Uses the non-standard name: grid-gap
66
66
57
Uses the non-standard name: grid-gap
29
Disabled
Uses the non-standard name: grid-gap
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
61
61
52
Uses the non-standard name: grid-gap
40 — 59
Disabled
Uses the non-standard name: grid-gap
Disabled 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.
47
47
43
Uses the non-standard name: grid-gap
28
Disabled
Uses the non-standard name: grid-gap
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
10.3
10.3
Uses the non-standard name: grid-gap
12
9.0
9.0
7.0
Uses the non-standard name: grid-gap
calc() values 66 66 52 47 No 9.0
<percentage> values 66 66 52 47 No 9.0

Support in Multi-column layout

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Supported in Multi-column Layout 66 16 61 No 53 No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Supported in Multi-column Layout 66 66 61 47 No 9.0

Legend

Full support
No support

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/gap