Easy Tutorial
❮ Pr List Style Position Sel Attribute ❯

CSS grid-column-gap Property

Example

Set the grid gap between columns to 50px:

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

Browser Support

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

Property Chrome Edge Firefox Safari Opera
grid-column-gap 57 16 52 10 44

Property Definition and Usage

The grid-column-gap property defines the gap between the columns.

Note: This property was renamed to `` in CSS3.

Default value: 0
Inherited: no
--- ---
Animatable: Yes. Read about animatable Try it
--- ---
Version: CSS Grid Layout Module Level 1
--- ---
JavaScript syntax: object.style.gridColumnGap="50px" Try it
--- ---

Syntax

grid-column-gap: length;
Value Description
length A length value, which can be in px or percentage %. 0 is the default value. Learn more about length units

Related Articles

CSS Tutorial: CSS Grid Layout

CSS Reference: grid-gap Property

CSS Reference: grid-row-gap Property

❮ Pr List Style Position Sel Attribute ❯