CSS gap Property: How to Add Space Between Elements

Use gap on a Grid, Flexbox, or multi-column container to set the space between its tracks or items. For example:

.card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

This gives the grid a 1rem row gap and a 1rem column gap. The gap belongs on the parent container; it creates space between participating items or tracks, not an inset around the container. See the MDN gap reference and its guide to defining CSS gaps.

1. Syntax: one value or two

gap is shorthand for row-gap and column-gap.

• gap: 1rem; sets both row and column gaps to 1rem.
• gap: 0.75rem 1.25rem; sets the row gap to 0.75rem and the column gap to 1.25rem.
• row-gap and column-gap can also be set separately when that reads more clearly.

.card-list {
  display: grid;
  row-gap: 0.75rem;
  column-gap: 1.25rem;
}

/* Equivalent shorthand */
.card-list {
  display: grid;
  gap: 0.75rem 1.25rem;
}

The order in the two-value shorthand is always row first, column second. Values can be lengths, percentages, or normal; use a non-negative length such as 1rem for predictable gutters. The formal syntax also includes line-width keywords. normal computes to zero outside multi-column layout; for consistent spacing, specify an explicit value.

2. Use gap with CSS Grid

In Grid, row and column gaps are gutters between tracks. They do not add space outside the first or last track. A grid item spanning multiple tracks spans the gutters between those tracks too.

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}

.featured-product {
  grid-column: 1 / -1;
}

Here the rows are separated by 1rem and columns by 1.5rem. The minmax(0, 1fr) pattern allows columns to shrink below their contents’ automatic minimum size, which can help prevent long content from forcing overflow. The gap itself is part of the grid’s track sizing: for example, three 100px tracks with a 10px gap between them occupy 320px in total.

If tracks are also distributed with justify-content or align-content, the visible distance between tracks can exceed the declared gap because alignment may distribute extra free space as well.

3. Use gap with Flexbox

Flexbox’s row and column gap directions follow flex-direction. They are not fixed synonyms for horizontal and vertical spacing.

Row direction

With flex-direction: row or row-reverse, column-gap separates items along a line. row-gap separates wrapped flex lines.

.toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem 1rem; /* line gap, then item gap */
}

Column direction

With flex-direction: column or column-reverse, row-gap separates items down the column. column-gap separates lines if the flex container wraps.

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

Flex containers are single-line by default. Add flex-wrap: wrap if items should form multiple lines and you need a gap between those lines. A single-value gap is often the clearest choice for a simple vertical stack.

4. Use gap with multi-column layout

In multi-column layout, column-gap sets the gutter between adjacent columns. The documented default column gutter is 1em. row-gap applies when columns form multiple rows under the relevant multi-column behavior.

.article-columns {
  columns: 2;
  column-gap: 2rem;
}

You can write gap as shorthand here too, but set the column gutter explicitly when the default is not suitable.

5. Choose a value that fits the container

Lengths such as rem, em, and px are common. A percentage gap is based on the container’s content box in the relevant dimension:

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2% 3%;
}

Percentage gaps need care when the container dimension is indefinite or being intrinsically sized. Grid and Flexbox handle percentage gaps differently during intrinsic sizing; a percentage may contribute as zero at that stage and resolve later, depending on the layout. If the result is surprising, use a fixed length or give the container a definite size. Consult the MDN gap guide for layout-specific percentage behavior.

6. Debug spacing that looks wrong

gap controls only the space between participating items or tracks. Several other properties can add to the visible distance or create space at the edges.

What you see	What to check	What to do
The gap runs in the wrong direction	Two-value order and, for Flexbox, flex-direction	Remember row gap first, column gap second; map those axes to the flex direction.
Items on one flex line have no space	Whether the container is actually Flexbox and whether the declaration is on its parent	Set display: flex on the parent and put gap there.
Wrapped lines touch or have unexpected spacing	flex-wrap and the row/column mapping	Enable wrapping as needed, then set the line gap on the correct shorthand axis.
The visible space is larger than the declared gap	Child margins, container padding, justify-content, and align-content	Temporarily zero margins and use justify-content: start and align-content: start to isolate the gap.
There is unexpected space at the outer edge	Container padding, child margins, and distributed alignment	Gap does not add an outer inset; inspect those properties separately.
A percentage gap changes with content or container sizing	Whether the relevant container dimension is definite	Try a fixed length or establish a definite container size.
The declaration appears to do nothing	Whether the parent is a Grid, Flexbox, or multi-column container	Apply it to the layout container, not an individual child. Check the browser compatibility table if supporting an older browser floor.

For older Grid-era stylesheets, grid-gap, grid-row-gap, and grid-column-gap are legacy aliases. New code should use gap, row-gap, and column-gap. MDN marks gap broadly available across browsers since October 2017; check compatibility for any newer syntax feature and your specific browser support policy. The MDN box alignment overview also describes how alignment affects visible spacing.

7. Practical notes

• Performance: gap is a native layout property. Prefer it over adding spacer elements when you want consistent gutters between siblings; avoid repeatedly changing layout-affecting styles in animation loops without a specific need.
• Reliability: explicit lengths give predictable gutters. Test wrapping, narrow containers, and the browser versions your project supports.
• Content sizing: gaps consume space in the layout. A large fixed gap can leave less room for tracks or items, so account for it in tight or fixed-width containers.
• Cost: CSS gap is a browser layout feature and has no per-use service cost.

8. Capture a layout example for documentation

If you are documenting a component or debugging a spacing issue, a screenshot can make the layout easier to review. You can capture the rendered page with a browser tool or use a screenshot API. For a webpage screenshot API, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one GET request; it can also render HTML/CSS to an image.

9. Or skip the browser setup

To capture a page with ScreenshotNeo, get an API key and request the target URL. See the ScreenshotNeo API docs for parameters and response details.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

Cookie banners are accepted or removed before capture, along with known newsletter popups and chat widgets. Bot checks, blank pages, timeouts, and failed loads are never billed; cache hits also cost nothing. An MCP server lets AI agents use tools to take screenshots, inspect pages, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account and get 1,000 screenshots a month with no card.

10. FAQ

Does gap add space before the first item or after the last?

No. It adds gutters between participating items or tracks. Use padding for an inset at the container edge.

Can I use gap without Grid?

Yes. It works on Flexbox and multi-column containers as well as Grid.

Should I use gap or margins between siblings?

Use gap when the spacing belongs to the parent layout and should be consistent between its items. Margins are useful when spacing belongs to an individual child or when you need behavior that is not a uniform container gutter.

Why does a gap appear larger than its CSS value?

Margins, padding, or distributed alignment can add visible space. Inspect those alongside the declared gap.