CSS Gap Property

CSS Gap Property

The CSS gap property adds space between rows and columns in Grid, Flexbox, and Multi-column layouts without requiring margins on individual items.

The gap shorthand combines row-gap and column-gap, allowing both directions to use the same spacing or different values.

How gap Works

The gap property creates gutters between adjacent rows and columns of a layout.

.container {
  display: grid;
  gap: 20px;
}

This creates 20 pixels of spacing between adjacent Grid rows and columns.

The gap is inserted between the layout tracks or items. It does not add the same spacing around the outside edge of the container.

The gap Shorthand

With one value, gap sets both the row and column gap.

.container {
  gap: 20px;
}

This is equivalent to:

.container {
  row-gap: 20px;
  column-gap: 20px;
}

With two values, the first sets the row gap and the second sets the column gap.

.container {
  gap: 10px 30px;
}

This creates a 10-pixel gap between rows and a 30-pixel gap between columns.

The row-gap Property

The row-gap property controls the spacing between rows.

.container {
  display: grid;
  row-gap: 25px;
}

Only the spacing between adjacent rows is changed. Column spacing is not set by this declaration.

In a wrapping Flexbox layout, row-gap controls the spacing between flex lines along the cross axis.

The column-gap Property

The column-gap property controls the spacing between columns.

.container {
  display: grid;
  column-gap: 30px;
}

In Grid, this creates space between adjacent column tracks.

The property is also used by Flexbox and Multi-column Layout, although its exact effect depends on the layout mode.

Gap in CSS Grid

In CSS Grid, gaps create gutters between adjacent row and column tracks.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

The three columns share the available track space while 15-pixel gutters separate adjacent tracks.

Grid gaps take up space within the layout, so the track sizing algorithm accounts for the gutters when determining the size of flexible tracks.

Gap in Flexbox

Flexbox also supports the gap property for spacing between flex items and flex lines.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

The gap creates consistent spacing between adjacent flex items without requiring margins on each item.

For a row-oriented flex container, column-gap separates items along each flex line and row-gap separates the flex lines. With a column-oriented flex container, the relationship follows the flex axes rather than simply meaning physical horizontal and vertical spacing.

Gap in Multi-column Layout

In Multi-column Layout, the column gap controls the gutter between content columns.

.article {
  column-count: 3;
  column-gap: 30px;
}

The gap shorthand can also set this spacing.

.article {
  column-count: 3;
  gap: 30px;
}

Multi-column layouts use the column gap between columns of flowing content. A column-rule, when present, is drawn within this gap.

Gap vs Margin

Both gaps and margins can create visual space, but they serve different purposes.

For spacing between items in Grid and Flexbox layouts, gap often avoids the need for special margin rules on the first or last item.

Gap Values

Gap properties accept non-negative length and percentage values, as well as the normal keyword.

.container {
  gap: 20px;
}

.container {
  gap: 1rem;
}

.container {
  gap: 5%;
}

Relative units such as rem can make spacing respond to the site's typography, while percentages are calculated from the relevant container dimension and can have layout-specific sizing behavior.

The normal value depends on the layout context. In Grid and Flexbox it generally produces a zero used gap, while Multi-column Layout defines a nonzero normal column gap.

Responsive Gap

Gap values can be changed with media queries when a layout needs different spacing at different widths.

.cards {
  display: grid;
  gap: 30px;
}
@media (max-width: 600px) {
  .cards {
    gap: 15px;
  }
}

The layout uses a larger gap when more space is available and a smaller gap on narrow screens.

A fluid value can also be created with functions such as clamp().

.cards {
  gap: clamp(10px, 2vw, 30px);
}

This allows the gap to change with the viewport while remaining between the specified minimum and maximum values.

CSS Gap Example

The following example uses different row and column gaps so their effects are easy to compare.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 10px;
  column-gap: 30px;
}

Open the example in the editor and change the values of row-gap and column-gap. You can also replace both declarations with a single gap shorthand.