CSS gap attribute

Definition and usage

The gap property defines the gap size between rows and columns in flexbox, grid, or multiple column layouts. It is a shorthand property for the following properties:

Note:The gap property was previously known as grid-gap.

See also:

CSS Tutorial:CSS Grid Layout

CSS Tutorial:CSS Flexbox Layout

CSS Tutorial:CSS Multiple Column Layout

CSS Reference Manual:row-gap property

CSS Reference Manual:column-gap property

Instance

Example 1

Set the spacing between rows and columns to 50px:

.grid-container {
  gap: 50px;
}

Try it yourself

Example 2: Grid Layout

Set the row spacing to 20px and the column spacing to 50px in grid layout:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

Try it yourself

Example 3: Flexbox Layout

Set the row spacing to 20px and the column spacing to 70px in flexbox layout:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

Try it yourself

Example 4: Multiple Column Layout

Set the column spacing to 50px in multiple column layout:

#newspaper {
  columns: 3;
  gap: 50px;
}

Try it yourself

CSS Syntax

gap: row-gap column-gap|initial|inherit;
Value Description
row-gap Sets the gap size between rows in grid or flexbox layouts.
column-gap Sets the gap size between columns in grid, flexbox, or multiple column layouts.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: normal normal
Inheritance: No
Animation production: Supported. Please see the individual properties. See:Animation-related properties.
Version: CSS Box Alignment Module Level 3
JavaScript Syntax: object.style.gap="50px 100px"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Layout Chrome IE / Edge Firefox Safari Opera
In grid 66 16 61 12 53
In flexbox 84 84 63 14.1 70
In multiple columns 66 16 61 Not supported 53