CSS `gap` Property

Example

Set the gap between grid rows and columns:

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

Property	Chrome	Firefox	Safari	Edge	Opera
gap (in multi-column)	66	16	61	Not supported	53
gap (in grid)	66	16	61	10.1	53
gap (in flexbox)	84	84	63	Not supported	70

The gap property is used to set the gap between grid rows and columns. It is a shorthand for row-gap and column-gap.

Note: CSS Grid Layout was initially defined using the grid-gap property, which is now being replaced by gap.

gap: row-gap column-gap;

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

Set row gap to 20px and column gap to 50px:

CSS Reference: row-gap Property

CSS Reference: column-gap Property