CSS grid-column-gap attribute

Definition and Usage

The grid-column-gap property defines the size of the column gap in the grid layout.

See Also:

CSS Tutorial:CSS Grid Layout

CSS Reference Manual:grip-gap Property

CSS Reference Manual:grip-row-gap Property

Example

Set the column gap to 50 pixels:

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

Try It Yourself

CSS Syntax

grid-column-gap: length;

Property Value

Value Description
length Any valid length value, such as pixels or percentages. The default value is 0. SeeLength Units.

Technical Details

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

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