CSS gap Property

Definition and Usage

The gap property sets the gutters between rows and columns. It works on grid, flex, and multi-column containers.

It is a shorthand for row-gap and column-gap. One value sets both axes. Two values set row gap first, then column gap. The property is not inherited. The initial value is normal (0 in grid and flex; 1em in multi-column).

CSS Syntax

Each gap value is normal, a length such as 20px, a percentage, or calc().

Property Values

Negative values are invalid. Gaps appear between tracks or items, never before the first or after the last.

How to Use gap

Create a flex, grid, or multi-column container, then set the gutter size on that container.

1. Set display: grid, display: flex, or a multi-column layout on the container.
2. Add gap with one value for equal gutters, or two values for row then column.
3. Prefer gap over item margins when every item needs the same spacing.
4. Use the longhands row-gap or column-gap when only one axis should change.

Live Preview

A three-column grid. Only gap changes. Watch the space between the tiles grow or shrink.

CSS Examples

Each snippet focuses on gap. Use Try It Yourself for a live editor.

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

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

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

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

<style>
  section {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
</style>

<section>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>

Key Takeaways