gap
The gap
CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap
and 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.
<'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
Initial value |
as each of the properties of the shorthand:
|
Applies to |
grid containers |
Inherited |
no |
Media |
visual |
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:
|
Canonical order |
the unique non-ambiguous order defined by the formal grammar |
Support in Flex layout
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Basic support |
? |
? |
63 |
No |
? |
No |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
Basic support |
? |
? |
No |
63 |
? |
No |
? |
Support in Grid layout
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Basic support |
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
Disabled
- Uses the non-standard name:
grid-gap
- Disabled From version 40: 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
|
<percentage> values
|
66 |
16 |
52 |
No |
53 |
No |
calc() values
|
66 |
? |
52 |
No |
53 |
No |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
Basic support |
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.
|
No |
61
- 61
- 52
- Uses the non-standard name:
grid-gap
- 40
Disabled
- Uses the non-standard name:
grid-gap
- Disabled From version 40: this feature is behind the
layout.css.grid.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
|
53
- 53
- 44
- Uses the non-standard name:
grid-gap
|
10.3
- 10.3
- Uses the non-standard name:
grid-gap
|
6.0
- 6.0
- Uses the non-standard name:
grid-gap
|
<percentage> values
|
66 |
66 |
No |
52 |
53 |
No |
No |
calc() values
|
66 |
66 |
No |
52 |
53 |
No |
No |
Support in Multi-column layout
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Basic support |
66 |
16 |
61 |
No |
53 |
No |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
Basic support |
66 |
66 |
? |
61 |
53 |
No |
No |
Legend
- Full support
- No support
- Compatibility unknown
- Compatibility unknown
See also