CSS grid-column-gap Property


Example

Set the gap between columns to 50px:

.grid-container {
  grid-column-gap: 50px;
}
Try it Yourself »

Definition and Usage

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

Note: This property was renamed to column-gap in CSS3. 

Show demo ❯

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

Browser Support

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

Property
grid-column-gap 57 16 52 10 44


CSS Syntax

grid-column-gap: length;

Property Values

Value Description Demo
length Any legal length value, like px or %. 0 is the default value. Read about length units Demo ❯

Related Pages

CSS tutorial: CSS Grid Layout

CSS reference: The grid-gap property

CSS reference: The grid-row-gap property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.