CSS grid-gap Property

Definition and Usage

The grid-gap property is a shorthand that sets gutters between rows and columns in a CSS grid. Space appears only between tracks — not on the outer edges of the grid.

For new CSS, prefer gap. It is the modern name for the same shorthand and also works on flex and multi-column. Set it on a display: grid container with grid-template-columns.

CSS Syntax

One value sets both axes. Two values set row-gap first, then column-gap. Negative lengths are invalid. On grid, normal means no gutter (0).

Property Values

How to Use grid-gap

Build a grid, then set gutters with one shorthand. Prefer gap for new stylesheets.

1. Create a grid with display: grid and column (and optional row) tracks.
2. Set grid-gap (or better, gap) to one or two lengths.
3. Use two or more rows and columns so both gutters are visible.
4. Or set axes separately with grid-row-gap / grid-column-gap (prefer row-gap / column-gap).

Live Preview

A 3×2 grid. Change only grid-gap on the container.

CSS Examples

Each snippet focuses on grid-gap. Prefer gap in production. Use Try It Yourself for a live editor.

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 16px;
  }
</style>

<div class="grid">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px 24px;
  }
</style>

<div class="grid">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
  }
</style>

<div class="grid">
  <div>A</div><div>B</div><div>C</div>
  <div>D</div><div>E</div><div>F</div>
</div>

Key Takeaways