In this section, we will learn what the grid-gap property is and how to use it in CSS.

Click here to run the example of grid-gap property.

CSS grid-gap Property Definition and Usage

When we create a grid on a page, by default, each cell of the grid sits next to the other in a way that there’s no space or gap between them. But of course, like many other CSS behaviors, this one is changeable and we can put a gap between cells of a grid, horizontally and vertically.

In order to do this, CSS provided a property named `grid-gap` which takes one or two values that determine the gap between each cell.

The CSS `grid-gap` property is actually the shorthand property of two other properties named:

`grid-row-gap`: which is used to set the horizontal gap between each cell.

`grid-column-gap`: which is used to set the vertical gap between each cell.

Note: this property is renamed to “gap” in CSS 3.

CSS grid-gap Property Syntax

grid-gap: horizontal-gap vertical-gap;

grid-gap: horizontal-and-vertical-gap;

CSS grid-gap Property Value

• Horizontal-gap: this value determines the horizontal gap between each cell within a grid.
• Vertical-gap: this value determines the vertical gap between each cell within a grid.
• Horizontal-and-vertical-gap: we can also put only one value and that will be used for both horizontal and vertical gap in a grid.

Example: grid-gap property in CSS

See the Pen grid-gap property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS grid-gap Property Work?

As you can see, in this example, the value of the `grid-gap` property is set to 20px. This means now between each row and columns in the grid there’s a gap of 20px.