Layout

gap

gap sets the space between rows (row-gap) and between columns (column-gap) of items in a flexbox, grid or multi-column layout.

Syntax

<'row-gap'> <'column-gap'>?

Preview

1234

Presets

Sample

Items

Drag the bottom-right corner to resize

Code

.box {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 8px;
}

Controls

row-gap16px

column-gap8px

1234

About

Values

Write the row gap and then the column gap, separated by a space (gap: 16px 8px). With one value, both gaps get it. They can also be set separately as row-gap and column-gap.

normal: the initial value. It is 0 in flexbox and grid, and 1em between columns of a multi-column layout (columns).
Lengths and percentages: negative values are not allowed. Percentages are of the width or height of the box's content.

Only between items

gap only adds space between items, never at the edges of the box (before the first item or after the last). Use padding for space at the edges.

The preview on this page sets display: flex and flex-wrap: wrap as helper declarations and places four items, each 30% of the box width. When a flexbox wraps, the column gap counts toward whether items fit on a line, so a larger column-gap stops three items fitting and they split two and two.

Old names

These used to be the grid-only grid-gap, grid-row-gap and grid-column-gap. Browsers still read them, but use gap in new code.

gap