The gap
CSS property is a shorthand property for rowgap
and columngap
specifying the gutters between rows and columns.
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/interactiveexamples and send us a pull request.
CSS Grid Layout initially defined the gridgap
property. This prefixed property will be replaced by gap, however in order to support browsers that implemented gridgap 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 <'rowgap'>
followed optionally by a value for <'columngap'>
. If <'columngap'>
is omitted, it’s set to the same value as <'rowgap'>
.
<'rowgap'>
and <'columngap'>
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
<'rowgap'> <'columngap'>?
Example
HTML Content
<div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
CSS Content
#grid { display: grid; height: 200px; gridtemplate: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5px; } #grid > div { backgroundcolor: lime; }
Specifications
Specification  Status  Comment 

CSS Box Alignment Module Level 3 The definition of 'gap' in that specification. 
Working Draft  Initial definition 
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:

Animation type  as each of the properties of the shorthand:

Canonical order  the unique nonambiguous order defined by the formal grammar 
Browser compatibility
No compatibility data found. Please contribute data for "css.properties.gap" (depth: 1) to the MDN compatibility data repository.
See also
 Prefixed, deprecated CSS equivalents:
gridrowgap
,gridcolumngap
,gridgap
 Related CSS properties:
rowgap
,columngap
 Grid Layout Guide: Basic concepts of grid layout  Gutters