CSS grid-column-gapProperty
Example
Set the grid gap between columns to 50px:
.grid-container {
display: grid;
grid-column-gap: 50px;
}
Try it Yourself »
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 |
Property definition and usage instructions
The grid-column-gap property defines the grid gap between columns.
Note:This property was renamed in CSS3 to
column-gap 。
| Default Value: | 0 |
|---|---|
| Inherited: | no |
| animation: | Supported.Read Aboutanimatable Try it Yourself |
| version: | CSS Grid Layout Module Level 1 |
| JavaScript Syntax: | object.style.gridColumnGap="50px" Try it Yourself |
Syntax
grid-column-gap: length;
| Value | Description |
|---|---|
| length | Length value, can be a numeric value in px or a percentage %. 0 is the default value. Learn moreLength Units。 |
Related Articles
CSS Tutorial:CSS Grid Layout
CSS Reference Manual:grid-gapProperty
CSS Reference Manual:grid-row-gapProperty
other extensions