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.