The CSS gap property

Q: What is the difference between gap and margin?

gap only adds space between items and lives on the container; margin adds space around an individual element, including its outer edges, and can collapse. Gap is cleaner for spacing layout children.

Q: How do I set different horizontal and vertical gaps?

Use two values: gap: 8px 24px sets an 8px row gap and a 24px column gap. Or set row-gap and column-gap separately.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS gap property sets the space between items in a flex, grid or multi-column container, e.g. gap: 16px. It is shorthand for row-gap and column-gap. Unlike margins, it only adds space between items, never around the outer edge — which is why it has become the go-to way to space out modern layouts.

Overview

gap sets the spacing between items in a layout container — the gutters between grid cells, the space between flex items, the channel between newspaper-style columns. It started life in Grid, then arrived in Flexbox, and it has quietly made margins-for-spacing feel old-fashioned.

The reason it caught on is that it only adds space between items, never on the outside. With margins you always ended up with a stray gap on the first or last child to strip away; with gap that problem simply does not exist. One value spaces both rows and columns equally; two values set the row gap and the column gap separately.

It is a shorthand for row-gap and column-gap, so you can reach for those directly when you need different spacing in each direction. And because it does not touch margin collapsing or item sizing, it is far more predictable than the techniques it replaced.

Syntax

selector {
  display: flex; /* or grid */
  gap: 16px;
}

/* different row and column spacing */
.grid {
  display: grid;
  gap: 8px 24px;
}

Values

The gap property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`length`	A fixed gap such as 16px, 1rem or 24px applied between items.
`two lengths`	row-gap then column-gap, e.g. gap: 8px 24px.
`percentage`	A share of the container size, e.g. gap: 2%.
`0`	No gap.

Example

Live example

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .grid div { background: #1c7ce9; color: #fff; padding: 18px; border-radius: 8px; text-align: center; font: 600 14px system-ui, sans-serif; }
</style>
<div class="grid">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

Best practices

Use gap instead of margins to space flex and grid children — it avoids stray edge margins and margin collapsing entirely.
Set a single consistent gap value (or a small scale) across a layout so spacing feels intentional rather than ad hoc.
Use the two-value form, gap: 8px 24px, when a grid needs tighter rows than columns or vice versa.
Remember it needs a flex, grid or multi-column container — on a plain block it has no effect.

Frequently asked questions

What does the gap property do?

It adds space between the items of a flex, grid or multi-column container — for example gap: 16px puts a 16px gutter between every item, but none around the outside.

What is the difference between gap and margin?

gap only adds space between items and lives on the container; margin adds space around an individual element, including its outer edges, and can collapse. Gap is cleaner for spacing layout children.

Does gap work with flexbox?

Yes. It works in Flexbox, Grid and multi-column layouts. Older browsers only supported it in Grid, but flex gap is well supported in every current browser.

How do I set different horizontal and vertical gaps?

Use two values: gap: 8px 24px sets an 8px row gap and a 24px column gap. Or set row-gap and column-gap separately.

font-weight grid-template-columns

References