CSS gap Property

❮ Previous Complete CSS Reference Next ❯

Example

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

.grid-container {
gap: 50px;
}

Definition and Usage

The gap property defines the size of the gap between the rows and between the columns in flexbox, grid or multi-column layout. It is a shorthand for the following properties:

row-gap
column-gap

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

Browser Support

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

Property
gap (in Grid)	66	16	61	12	53
gap (in Flexbox)	84	84	63	14.1	70
gap (in Multiple Columns)	66	16	61	Not supported	53

CSS Syntax

gap: row-gap column-gap|initial|inherit;

Property Values

Value	Description	Demo
row-gap	Sets the size of the gap between the rows in a grid or flexbox layout	Demo ❯
column-gap	Sets the size of the gap between the columns in a grid, flexbox or multi-column layout	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit