Web/CSS/gap

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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: row-gap: normal column-gap: normal
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: row-gap: a length, percentage or calc(); column-gap: a length, percentage or calc();

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; 

}

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;
}

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;
}

Specifications

Specification	Status	Comment
CSS Box Alignment Module Level 3The definition of 'gap' in that specification.	Working Draft	Initial definition

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Support in Flex layout

Update compatibility data on GitHub

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

Legend

Full support  

Full support

No support  

No support

Support in Grid layout

Update compatibility data on GitHub

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

Legend

Full support  

Full support

No support  

No support

User must explicitly enable this feature.'

User must explicitly enable this feature.

Uses a non-standard name.'

Uses a non-standard name.

Support in Multi-column layout

Update compatibility data on GitHub

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

Legend

Full support  

Full support

No support  

No support

See also

• Related CSS properties: row-gap, column-gap
• Grid Layout Guide: Basic concepts of grid layout - Gutters

gap (grid-gap) by Mozilla Contributors is licensed under CC-BY-SA 2.5.