CSS grid-gap attribute

Definition and Usage

The grid-gap property defines the size of the gap between rows and columns in the grid layout and is a shorthand for the following properties:

Note:This property has been renamed in CSS3 to gap.

See also:

CSS Tutorial:CSS Grid Layout

CSS Reference Manual:grip-row-gap Property

CSS Reference Manual:grip-column-gap Property

Example

Example 1

Set the shorthand for the gap between rows and columns to 50 pixels:

.grid-container {
  grid-gap: 50px;
}

Try It Yourself

Example 2

Set the row gap to 20 pixels and the column gap to 50 pixels:

.grid-container {
  grid-gap: 20px 50px;
}

Try It Yourself

CSS Syntax

grid-gap: grid-row-gap grid-column-gap;

Attribute Value

Value Description
grid-row-gap Set the size of the row gap in the grid layout. The default value is 0.
grid-column-gap Set the size of the column gap. The default value is 0.

Technical Details

Default Value: 0 0
Inheritance: No
Animation Creation: Supported. See also:Animation-related Properties.
Version: CSS Grid Layout Module Level 1
JavaScript Syntax: object.style.gridGap="50px 100px"

Browser Support

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

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44