gap property in CSS

Example

A simple gap property example:

.grid-container {
    border: 3px solid green;
    background-color: mintcream;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 60px;
}

Laboratory

description & Usage

To determine the size and distance between rows and columns in a grid layout, we use the gap property, which has 2 subsets:

row-gap
column-gap

are also used for columns and rows.

Informations

#	Description
Default Value	normal normal
Inherited	no
Animatable	yes
Version	CSS Box Alignment Module Level 3
JavaScript syntax	object.style.gap="50px 100px"

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
gap (in Grid)
gap (in Flexbox)
gap (in Multiple Columns)

Syntax

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

Values

Values	Description
row-gap	Determines the size between rows.
column-gap	Specifies the size between columns.
initial	Adds this value to its default property.
inherit	It inherits this value from its parent tag.

gap property CSS