grid-gap property in CSS

Example

A simple grid-gap property example:

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 60px;
    background-color: #2196F3;
    padding: 15px;
}

Laboratory

description & Usage

To determine the gap between columns, rows and rows in a grid layout, we use the grid-gap property.

Informations

#	Description
Default Value	0 0
Inherited	no
Animatable	yes
Version	CSS Grid Layout Module Level 1
JavaScript syntax	object.style.gridGap="50px 100px"

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
grid-gap

Syntax

grid-gap: grid-row-gap grid-column-gap;

Values

Values	Description
grid-row-gap	Determines the size of the gap between the rows in the grid layout, the default value of which is 0.
grid-column-gap	Determines the size of the gap between the columns in the grid layout, the default value of which is 0.

grid-gap property CSS

Example

description & Usage

Informations

Browser compatibility and Support

Syntax

Values