gap

The gap property specifies the size of the gap (space) between rows and columns. It is a shorthand for row-gap and column-gap.

Syntax

Before CSS3 this property was known as grid-gap.

.container {
  gap: 20px 30px;
}

Values

row-gap
Specifies the size of the gap between rows in a grid layout.

column-gap
Specifies the size of the gap between columns in a grid layout.

Browser Compatibilty

Demos

Have a code example of gap? Submit a codepen.io demo and we'll showcase it here ↴