CSS grid-column-gap Property

Definition and Usage

The grid-column-gap property sets the size of the gutter between columns in a CSS grid. Space appears only between columns — not on the outer edges of the grid.

For new CSS, prefer column-gap. Pair with grid-template-columns on a display: grid container. Use gap when you need both row and column gutters.

CSS Syntax

Same grammar as column-gap. Negative values are invalid. On grid, normal means no column gutter (0).

Property Values

How to Use grid-column-gap

Build a grid, then set the column gutter. Prefer column-gap for new stylesheets.

1. Create a grid with display: grid and grid-template-columns.
2. Set grid-column-gap (or better, column-gap) to a length or percentage.
3. Add more than one column so the gutter is visible.
4. Use grid-row-gap / row-gap or gap for vertical spacing.

Live Preview

A three-column grid. Change only grid-column-gap. Row spacing stays fixed.

CSS Examples

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

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

<div class="grid">
  <div>1</div><div>2</div><div>3</div>
</div>

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

<div class="grid">
  <div>A</div><div>B</div><div>C</div>
</div>

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

<div class="grid">
  <div>1</div><div>2</div><div>3</div>
</div>

Key Takeaways