CSS grid-gapProperty
Example
Set the gap between rows and columns to 50px:
.grid-container {
grid-gap: 50px;
}
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| grid-gap | 57 | 16 | 52 | 10 | 44 |
Property definition and usage instructions
The grid-gap property is used to set the gap between grid rows and columns.
Note:grid-gap is the shorthand form of row-gap and column-gap.
| Default Value: | 0 0 |
|---|---|
| Inherited: | no |
| animation: | Supported.Read Aboutanimatable Try it Yourself |
| version: | CSS Grid Layout Module Level 1 |
| JavaScript Syntax: | object.style.gridGap="50px 100px" Try it Yourself |
Syntax
grid-gap: grid-row-gap grid-column-gap;
| Value | Description |
|---|---|
| grid-row-gap | Sets the size of the gap between rows in the grid layout. The default value is 0. |
| grid-column-gap | Sets the size of the gap between columns in the grid layout. The default value is 0. |
Example
The following example sets the grid row gap to 20px and the column gap to 50px:
.grid-container {
grid-gap: 20px 50px;
}
Try it Yourself »
Related Articles
CSS Tutorial:CSS Grid Layout
CSS Reference Manual:grid-row-gapProperty
CSS Reference Manual:grid-column-gapProperty
other extensions