CSS Gap
Imagine arranging books on a shelf by wedging little foam spacers between each one so they never touch, if you want more breathing room you would have to individually adjust every single spacer.
The gap property is a single setting on the shelf itself that automatically spaces every book evenly, no matter how many books you add or remove later.
In flexbox and grid layouts, gap replaces the old trick of adding margin to every child element, giving you one clean declaration on the parent container that handles spacing between items consistently in both rows and columns.
In this page:
Syntax
selector {
display: grid | flex;
gap: row-gap column-gap;
}gap in Flexbox
Inside a flex container, gap adds consistent space between adjacent flex items along both the main and cross axes, without requiring individual margins on each child.
Note:
- Use gap instead of margin between flex items to avoid extra unwanted space at the very first and last item's outer edge.
- Accepted values:
- gap: <length> — space between flex items on both axes
- row-gap: <length> — space between wrapped rows only
- column-gap: <length> — space between items in a row only
- normal — the default (0 in flex and grid)
- <percentage> — resolved against the container's content box
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
gap in flexbox requires a reasonably modern browser, always check your minimum supported browser version before relying on it for critical spacing.
Example: gap in Flexbox
<style>
.container {
display: flex;
gap: 16px;
background: #eef;
padding: 10px;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>gap in Grid
gap was originally introduced for CSS Grid, where it separates grid tracks cleanly regardless of how many rows or columns the layout contains, keeping the whole grid visually uniform.
Note:
- Grid gap works seamlessly with grid-template-columns: repeat(), the spacing stays consistent even as the number of columns changes responsively.
- Accepted values:
- gap: <length> — same gutter for rows and columns
- gap: <row> <column> — two values set row-gap then column-gap
- <percentage> — relative to the grid container's size
- normal — default, no gutter (1em only in multi-column layouts)
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
gap in grid only affects space between tracks, it does not add padding around the outer edge of the grid container itself.
Example: gap in Grid
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div><div>2</div><div>3</div>
</div>row-gap and column-gap
row-gap and column-gap let you control spacing on each axis independently, which is useful when a design calls for tighter horizontal spacing but more breathing room between rows.
Note:
- Set column-gap smaller than row-gap in dense card grids so cards feel grouped horizontally while rows stay visually separated.
- Accepted values:
- row-gap: <length> — vertical space between rows
- column-gap: <length> — horizontal space between columns
- <percentage> — relative to the container
- normal — default, no gap
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
row-gap and column-gap are ignored on containers that are not flex, grid, or multi-column, just like the gap shorthand.
Example: row-gap and column-gap
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 24px;
column-gap: 8px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>The gap Shorthand
The gap shorthand accepts either one value applied to both axes, or two values where the first sets row-gap and the second sets column-gap, similar in spirit to the padding and margin shorthands.
Note:
- Write gap: 16px when you want identical spacing everywhere, it is more concise than repeating the value for both row-gap and column-gap separately.
- Accepted values:
- gap: 16px — one value for both row and column gaps
- gap: 8px 24px — row gap first, then column gap
- gap: 2% — percentage of the container
- gap: normal — reset to default
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
In the two-value form of gap, the order is always row-gap first and column-gap second, reversing them swaps horizontal and vertical spacing unintentionally.
Example: The gap Shorthand
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 8px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>Browser Support and Fallbacks
While gap now has broad support, older projects sometimes still need a fallback for legacy browsers, commonly achieved with negative margins on the container and matching margins on the items.
Note:
- Check current browser support tables before relying on flexbox gap in a project that must support older browser versions still in active use.
- Accepted values:
- gap — works in Flexbox and Grid in all modern browsers
- grid-gap — legacy alias for Grid only
- margin — fallback for very old browsers
Warning:
The old margin-based spacing fallback must be removed carefully, mixing both gap and manual margins on the same items can double up the spacing.
Example: Browser Support and Fallbacks
<style>
.container {
display: flex;
margin: -8px;
background: #eef;
padding: 10px;
}
.item {
margin: 8px;
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="item">Fallback spacing via negative margin</div>
<div class="item">Item</div>
</div>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Trying to use gap on a plain block or inline container, gap only applies to flex, grid, and multi-column containers.
- Confusing gap with margin, gap only creates space between items, never adding extra space at the outer edges of the container.
- Using the older grid-gap prefixed property in new code, gap is now the standard name and grid-gap is a legacy alias.
Chapter Summary
- gap is shorthand for row-gap and column-gap, creating consistent spacing between flex or grid items.
- gap works in both flexbox and grid containers, unlike margin it never adds space around the outer edge of the container.
- row-gap and column-gap can be set independently when spacing needs to differ between rows and columns.
Browser Support
gap has been supported in CSS Grid since 2017 in all modern browsers, and was added for flexbox in 2020 across Chrome, Firefox, Safari, and Edge.
🔒
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: