Gap Spacing Property
Last updated: 2026-09-13
gap Gap Spacing Property
The gap property sets the spacing between rows and columns in flex and grid layouts. It is a shorthand for row-gap and column-gap. Gap only adds space between items and never at the container edges, which makes it cleaner and more predictable than margins. It removes the usual hassle of clearing the first and last margins in traditional margin-based spacing.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
gap: normal | <length> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | Keyword | Default spacing |
<length> | <percentage> | Type | Row and column spacing |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| gap | ✓ v66 | ✓ v16 | ✓ v61 | ✓ v10.1 | ✓ v53 |
| Supported in all major browsers | |||||
Tip： The two values of gap map to row-gap and column-gap: gap: 10px 20px means 10px between rows and 20px between columns. A single value applies to both.
Important： gap only works in flex and grid layouts; it has no effect in normal block layout. Use margin when you need spacing between block elements.
❓ FAQ
QWhat is the difference between gap and margin?
Agap only creates space between the items and never adds space at the container edges, so there are no first or last gaps to clean up. margin creates space on all sides of an element, so the first and last margins need special handling, and margins can interfere with the flex or grid sizing math. Prefer gap for internal layout spacing and keep margin for the space between an element and things outside it.
QHow is the browser support for gap?
AIn flex layouts gap is fully supported from Chrome 84, Firefox 63 and Safari 14.1 onward; in grid layouts it was supported much earlier (Chrome 66+, Safari 12+). Percentage values are also supported and resolve against the container size. To support older browsers, first implement the spacing with margin as a fallback, then use a @supports (gap: 1px) feature query to switch to the new syntax.
QWhat is the difference between gap and grid-gap, and why is gap recommended now?
Agrid-gap was the early syntax that only applied to grid, together with grid-row-gap and grid-column-gap. Later the spec extended gap to flex, grid and multi-column layouts and renamed the property. gap is now the shorthand for row-gap and column-gap, and those standalone properties remain valid and handy when only one direction needs a custom value. All modern browsers support gap; grid-gap is the legacy form, so new code should use gap.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
