CSS Grid

Gutters

We can create gutters (space between items) by using the grid-column-gap and the grid-row-gap properties. The value of these properties can be any non-negative length unit.

Syntax

Copy
  grid-row-gap: 1rem;
  grid-column-gap: 30px;

Shorthand syntax

We can specify both row and column gap with the grid-grap property.

Copy
  grid-gap: 1rem 30px;

is equivalent to

Copy
  grid-row-gap: 1rem;
  grid-column-gap: 30px;

Code example

In the below example, we have created a 4x2 layout with a 1.0rem gap between rows and a 0.5rem grap between columns.

Copy
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-row-columns: repeat(2, 1fr);
  grid-gap: 1.0rem 0.5rem;
}

1

2

3

4

5

6

7

8