W3cubDocs

grid-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: `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; 

}

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 GitHub Update compatibility data on GitHub Update 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

grid-gap

Syntax

Values

Formal definition

Formal syntax

Examples

Flex layout

HTML

CSS

Result

Grid layout

HTML

CSS

Result

Multi-column layout

HTML

CSS

Result

Specifications

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

Support in Flex layout

Support in Grid layout

Support in Multi-column layout

Legend

See also

Browser compatibilityUpdate compatibility data on GitHub Update compatibility data on GitHub Update compatibility data on GitHub