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:

gap in Flexbox
gap in Grid
row-gap and column-gap
The gap Shorthand
Browser Support and Fallbacks

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.

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

css

<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.

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

css

<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.

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

css

<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.

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

css

<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.

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

css

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

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:

← Previous Lesson CSS Website Layout Next Lesson → CSS Units