CSS Grid Gap

CSS Grid Gap

CSS Grid gaps create spacing between adjacent grid rows and columns without requiring margins on individual grid items.

The gap property is a shorthand for row-gap and column-gap. You can use equal spacing in both directions or control row and column spacing separately.

How Grid Gap Works

A Grid gap creates a gutter between adjacent grid tracks. It separates rows and columns without adding the specified gap around the outside edges of the grid.

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

This creates a 20-pixel gap between neighboring columns and between neighboring rows.

The gap occupies space between the tracks, so it is considered when the browser determines the space available for the Grid layout.

The gap Property

The gap property provides a shorthand for setting both row and column gaps.

.grid-container {
  gap: 20px;
}

With one value, the same gap is used for rows and columns.

The initial value of both row-gap and column-gap is normal. In Grid layout, normal computes to a zero-length gap.

The row-gap Property

The row-gap property controls the spacing between adjacent row tracks.

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

This adds 30 pixels of spacing between rows while leaving the column gap at its initial value unless another declaration sets it.

The column-gap Property

The column-gap property controls the spacing between adjacent column tracks.

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

This adds 15 pixels of spacing between columns while leaving the row gap at its initial value unless it is set separately.

Using Two gap Values

The gap shorthand can contain two values.

.grid-container {
  gap: 30px 10px;
}

When two values are used, the first sets the row gap and the second sets the column gap.

The two-value shorthand is equivalent to setting row-gap and column-gap separately.

Gap and Track Sizing

Gaps occupy space between Grid tracks and therefore affect the space available for sizing those tracks.

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

For a grid with three columns, two column gaps appear between the three tracks. The flexible tracks divide the available space after the gaps and other sizing requirements are taken into account.

This is one reason fr units work well with Grid gaps. The browser can distribute the remaining flexible space among the tracks.

Gap vs Margin

Grid gaps and margins can both create space, but they serve different purposes.

For regular spacing between Grid tracks, gap is usually clearer than adding matching margins to every grid item.

Percentage Gaps

Gap values can use percentages as well as length units.

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

Percentage gaps are resolved against the corresponding content-box dimension of the grid container when that dimension is definite.

Percentage gaps can be less predictable when the relevant container size is indefinite because percentage gap values participate in intrinsic sizing and final layout according to the Grid and Box Alignment sizing rules. For straightforward spacing, length units such as pixels or relative units are often easier to reason about.

Responsive Grid Gaps

Grid gaps can change at different viewport sizes just like other CSS properties.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 600px) {
  .grid-container {
    gap: 12px;
  }
}

This reduces the spacing when the viewport becomes narrower.

CSS functions can also create fluid spacing.

.grid-container {
  gap: clamp(10px, 2vw, 24px);
}

The gap can grow and shrink with the viewport while remaining within the specified minimum and maximum values.

CSS Grid Gap Example

The following example compares an equal gap with separate row and column gaps. Open the example in the editor and change the values to see how spacing between the Grid tracks responds.

.equal-gap {
  gap: 20px;
}
.different-gaps {
  row-gap: 30px;
  column-gap: 10px;
}