Syllabus

CSS gap, row-gap and column-gap in Flexbox and Grid

Badar KhalilUpdated October 1, 2026 3 min read

What is the CSS gap property?

The CSS gap property sets the space between flex or grid items. It is a shorthand for row-gap and column-gap. Unlike margin, gap adds space only between items and never on the outer edges, which makes spacing clean, predictable and easy to maintain. It is supported in all modern browsers for both Flexbox and CSS Grid.

Syntax

Code

.container {
  display: flex;
  gap: 16px;              /* row and column */
  gap: 20px 10px;         /* row-gap column-gap */
  row-gap: 20px;
  column-gap: 10px;
}

Properties explained

Property	Controls	Example
gap	Shorthand for both directions	gap: 16px 24px;
row-gap	Space between rows (vertical in a row layout)	row-gap: 20px;
column-gap	Space between columns (horizontal in a row layout)	column-gap: 10px;

How the shorthand works

With one value, it applies to both row and column gaps. With two values, the first is row-gap and the second is column-gap. Remember the order: row first, column second.

Allowed units

Absolute: px
Relative: rem, em, vw, vh
Percentages (resolve against the container size, mostly useful in Grid)
Functions: calc(), clamp(), min(), max()
CSS variables: gap: var(--space-4);

gap with flex-wrap

When flex items wrap, row-gap adds vertical space between lines and column-gap adds horizontal space between items. This replaces the old margin hacks with negative margins and gives perfect spacing on every line.

gap vs margin

Feature	gap	margin
Edge spacing	None, only between items	Added on every side
Last-item fix needed	No	Yes (:last-child hacks)
Set on	Parent container	Each child
Wrapping layouts	Clean	Needs negative margin trick
Collapsing	No	Vertical margins can collapse (not in flex)

Fluid and responsive gap

Use clamp() to scale spacing smoothly with the viewport:

Code

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 32px);
}

Using gap in CSS Grid

The same property works for Grid: display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;. Older names grid-gap, grid-row-gap and grid-column-gap are legacy aliases; use the unprefixed gap in new code.

Browser support

Grid gap has been supported for years. Flexbox gap is supported in Chrome 84+, Firefox 63+, Edge 84+ and Safari 14.1+, so it is safe for modern production projects.

Real-world use cases

Card grids and product lists.
Navbar link spacing.
Form fields stacked in a column.
Button groups and icon toolbars.
Tag and badge clouds with wrapping.

Common mistakes

Expecting gap to add outer padding. It never does; use padding for that.
Mixing up the order of the two-value shorthand (row then column).
Using gap on a container that is not flex or grid.
Adding both gap and margin on children and getting double spacing.
Using percentage gaps in flex layouts and getting unexpected results with undefined container size.

Best practices

Prefer gap over margin for sibling spacing.
Define a spacing scale with CSS variables and reuse it.
Use clamp() for fluid spacing on responsive layouts.
Use rem units so spacing respects user font-size settings.

Tailwind CSS equivalents

gap-4, gap-x-6, gap-y-2, gap-0. Example: flex flex-wrap gap-x-4 gap-y-2.

CSS gap property, flexbox gap, row-gap column-gap, CSS grid gap, gap vs margin, responsive spacing clamp, Tailwind gap-4, modern CSS spacing 2026, CSS flex gap browser support, design tokens spacing.

Frequently Asked Questions

Does gap work with Flexbox?

Yes, in all modern browsers including Safari 14.1 and above.

What is the order of values in gap: 10px 20px?

10px is row-gap and 20px is column-gap.

Is gap better than margin?

For spacing between siblings, yes. It is cleaner and needs no last-child fixes.

Does gap add space at the container edges?

No. Use padding on the container for edge spacing.

One-click copy

Code blocks ke Copy button se code copy karein. Cheat Sheet mein gap ke sab patterns ready hain.

Try it Yourself HTML

<style>
.demo{margin-bottom:14px;font-family:sans-serif}
.demo h4{margin:0 0 6px;font-size:14px}
.box{display:flex;flex-wrap:wrap;background:#f1f5f9;padding:10px;border-radius:8px;width:300px}
.box div{background:#2980b9;color:#fff;padding:10px 0;width:80px;text-align:center;border-radius:6px}
.g1{gap:6px}
.g2{gap:20px}
.g3{row-gap:24px;column-gap:6px}
</style>
<div class='demo'><h4>gap: 6px</h4><div class='box g1'><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div></div>
<div class='demo'><h4>gap: 20px</h4><div class='box g2'><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div></div>
<div class='demo'><h4>row-gap: 24px; column-gap: 6px</h4><div class='box g3'><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.fluid{display:flex;flex-wrap:wrap;gap:clamp(8px,3vw,32px);font-family:sans-serif}
.fluid div{flex:1 1 140px;background:#10b981;color:#fff;padding:20px;border-radius:8px;text-align:center}
</style>
<div class='fluid'><div>One</div><div>Two</div><div>Three</div><div>Four</div></div>
<p style='font-family:sans-serif'>Resize the preview: the gap scales with the screen width.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
:root{--space:16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space);font-family:sans-serif}
.grid div{background:#f59e0b;color:#fff;padding:24px;text-align:center;border-radius:8px}
</style>
<div class='grid'><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

Output

Press Run to execute.

Try it Yourself CSS

/* gap Cheat Sheet */
.uniform { display: flex; gap: 16px; }
.two-values { display: flex; flex-wrap: wrap; gap: 24px 12px; } /* row column */
.rows { display: flex; flex-direction: column; row-gap: 20px; }
.cols { display: flex; column-gap: 10px; }

/* Fluid gap */
.fluid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 32px);
}

/* With CSS variables */
:root { --space-4: 1rem; }
.tokens { display: flex; gap: var(--space-4); }

/* Works in Grid too */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

Output

Press Run to execute.

Exercise: Replace Margins with gapHTML

The buttons use margin for spacing. Remove the margin and use the gap property on the container so there are 12px between buttons horizontally and 20px between wrapped lines vertically.

Try it Yourself HTML

<style>
.btns{display:flex;flex-wrap:wrap;width:240px}
.btns button{margin:6px;padding:10px 16px;background:#6366f1;color:#fff;border:0;border-radius:6px}
</style>
<div class='btns'><button>One</button><button>Two</button><button>Three</button><button>Four</button></div>

Output

Press Run to execute.

Show expected output

No margin on buttons; container uses gap: 20px 12px so lines have 20px row spacing and 12px column spacing.

This is a self-check — compare your result with the expected output above.

Quiz: CSS gap Quiz Pass 70%

Loading quiz…

Was this page helpful?

What is the CSS gap property?

Syntax

Properties explained

How the shorthand works

Allowed units

gap with flex-wrap

gap vs margin

Fluid and responsive gap

Using gap in CSS Grid

Browser support

Real-world use cases

Common mistakes

Best practices

Tailwind CSS equivalents

Trending keywords related to this topic

Frequently Asked Questions

Does gap work with Flexbox?

What is the order of values in gap: 10px 20px?

Is gap better than margin?

Does gap add space at the container edges?

One-click copy