CSS gap property

Set the gap between rows and columns to 50px

Definition and Usage

The gap property defines the size of the gap between the rows and columns. It is a shorthand for the following properties:

Note: The gap property was formerly known as


grid-gap

Show demo ❯

Default value:	normal normal
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS Box Alignment Module Level 3
JavaScript syntax:	object.style.gap="50px 100px" Try it

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

gap: row-gap column-gap;

Value	Description	Demo
row-gap	Sets the size of the gap between the rows in a grid layout	Demo ❯
column-gap	Sets the size of the gap between the columns in a grid layout	Demo ❯

Set the gap between rows to 20px, and the columns to 50px:

.grid-container {
gap: 20px 50px;
}

CSS reference: The row-gap property

CSS reference: The column-gap property

Email:

Content: