CSS gap Property

❮ Previous Reference Next ❯


Set the gap 100px rows and 50px columns:
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 100px 50px;



The gap property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

Default value:normal normal
Version:CSS Box Alignment Module Level 3
JavaScript syntax:
object.style.gap="[row+column gap] | row-gap column-gap |initial|inherit|revert|revert-layer|unset";

Standard Syntax

gap: [row+column gap] | row-gap row-gap |initial|inherit|revert|revert-layer|unset;

Browser Support

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


Property Values

The following table describes the values of this property.

Value Description
row-gap Specifies that the size of the gap between the rows in a grid layout.
column-gap Specifies that the size of the gap between the columns in a grid layout.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  gap: normal normal;

More Example

The following example show how to use shorthand for specifying row-ga and column-gap:


.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto auto auto;
  gap: 50px
❮ Previous Reference Next ❯