On this page
CSS gap, row-gap & column-gap in Flexbox: Modern Spacing
What Is the CSS gap Property?
The gap property sets the space between flex items inside a flex container. It replaces the old habit of adding margins to every item and then removing the last one. Gap only adds space between items, never on the outer edges, so your spacing stays clean and predictable. It is the modern, recommended way to space flexbox layouts and also works in CSS Grid and multi-column layouts.
Syntax
.container {
display: flex;
gap: 20px; /* row and column gap */
gap: 20px 40px; /* row-gap column-gap */
row-gap: 20px; /* space between lines */
column-gap: 40px; /* space between items on a line */
}The default value is normal, which is 0 in flexbox.
gap, row-gap and column-gap
| Property | What it controls |
|---|---|
gap | Shorthand for row-gap and column-gap |
row-gap | Space between flex lines (vertical space in a row layout) |
column-gap | Space between items on the same line (horizontal space in a row layout) |
The shorthand order is row-gap first, then column-gap. If you pass only one value, it is used for both. Note that row-gap and column-gap always refer to the physical layout of rows and columns, not the main axis. In a column direction, column-gap is the space between separate columns (lines), and row-gap is the space between items inside a column.
Allowed Values
- Length units:
10px,1rem,2em,2vw - Percentages:
5%(relative to the container size where it resolves) - Functions:
calc(1rem + 2px),clamp(8px, 2vw, 24px) - CSS variables:
var(--space-md) - Keyword:
normal
Negative values are not allowed.
gap vs margin
| Feature | gap | margin |
|---|---|---|
| Space on outer edges | None | Yes, unless removed |
| Set on | The container (once) | Every item |
| Works with wrapping | Yes, row-gap and column-gap handled | Needs negative margin tricks |
| Works with reordering | Yes | :last-child rules break |
| RTL support | Automatic | Needs logical margins |
gap with flex-wrap
The gap property is perfect together with flex-wrap, because it handles spacing both horizontally and vertically when items wrap onto new lines.
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px 24px; /* 16px between rows, 24px between columns */
}gap and justify-content
Gap is the minimum space between items. When you use justify-content: space-between, space-around or space-evenly, the free space is added on top of the gap. If the container is too small to fit items plus gaps, items will wrap (with flex-wrap) or shrink.
Responsive Spacing with clamp()
.container {
display: flex;
flex-wrap: wrap;
gap: clamp(8px, 2vw, 32px);
}With clamp(), the gap grows smoothly with the viewport width, but never goes below 8px or above 32px. This is a very popular modern CSS technique for fluid spacing without media queries.
Design Tokens with CSS Variables
:root {
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
}
.toolbar { display: flex; gap: var(--space-sm); }
.cards { display: flex; flex-wrap: wrap; gap: var(--space-md); }Browser Support
Flexbox gap is supported in all modern browsers, including Chrome, Edge, Firefox and Safari (Safari from version 14.1). Support in very old browsers is missing, so if you must support legacy browsers, use a margin fallback with @supports.
Common Mistakes
- Expecting gap to add outer padding. It only adds space between items. Use padding for the container edges.
- Mixing gap and margins. The spaces add up and cause uneven spacing.
- Writing the shorthand in the wrong order. It is row first, then column.
- Using negative gap values. They are invalid.
- Setting gap on the items. It belongs on the container.
Best Practices
- Use gap instead of margins for spacing between flex items.
- Use CSS variables for a consistent spacing scale.
- Use clamp() for fluid spacing.
- Use padding on the container for outer spacing.
FAQ
Does gap work in flexbox?
Yes, in all modern browsers.
What is the difference between gap and margin?
Gap adds space only between items and is set once on the container. Margin is set on each item and also adds space outside the first and last item.
Can I use different gaps for rows and columns?
Yes. Use gap: 16px 32px or set row-gap and column-gap separately.
Key Takeaways
- gap adds space between flex items only.
- Shorthand order: row-gap then column-gap.
- Works great with flex-wrap, CSS variables and clamp().
- It is the modern replacement for item margins.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
The button group below uses margin-right on each button, which leaves extra space after the last one. Remove the margins and use the gap property on the container instead. Then make the six cards wrap with 16px between rows and 24px between columns.
Press Run to execute.
Show expected output
Buttons have 12px between them and no extra space after the last button. Cards wrap with 16px vertical and 24px horizontal spacing.This is a self-check — compare your result with the expected output above.
Was this page helpful?