Grid Gap

The gap property(used to be called grid-gap) controls the gap (or gutter) between rows and columns of a grid. Unlike margins, which apply to the items individually, gap applies to the container and creates space between the items, but allows the outer edge to be ‘stuck’ to the container walls. You can set an even amount of space using one value (eg. gap: 20px), or set the amount of space between rows and columns separately using two (eg. gap: 10px 30px). This is therefore by far the best way to control gutters in a grid.

Imagine grid gap as the “gaps” between the items in a layout. It‘s the space between the rows and columns, just like the grout between the floor tiles.

In current CSS the property is just called gap but you may still stumble upon the older grid-gap syntax in older tutorials.

1. The Three Main Properties

Even though gap is the most commonly used spelling, it is an abbreviation of two exact directions:

2. How to Use the Shorthand

The gap property is very flexible. Depending on how many values you give it, it behaves differently:

One Value: gap: 20px;

This applies a 20px space to both the rows and the columns equally.

Two Values: gap: 10px 40px;

The first number sets the row-gap (vertical space), and the second number sets the column-gap (horizontal space).

3. Important Rules to Remember

• Internal Space Only: Gaps only appear between items. They do not add space to the outer edges of the container. If you want space around the whole grid, you should use padding.
• No More “Grid-” Prefix: While grid-gap still works in browsers for compatibility, the standard is now just gap. This is because gap now works in Flexbox and Multi-column layouts too!
• Flexible Units: You can use any CSS unit, such as px, em, rem, or %.

Simple Example Code

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  /* Adds 20px of space between all items */
  gap: 20px; 
}

Why use Gap instead of Margin?

Before gap, we had to use margin on the items themselves. This was annoying because the items on the edges would have extra margin hitting the walls of the container, forcing us to use complex math or “last-child” selectors to remove it.

Check out our resources!

• Bootstrap Templates: Explore our Bootstrap Projects section.
• Free E-Books: Download your Free E-Books here.