CSS Grid: grid-gap

Instead of creating empty grid tracks or trying to hack things up with margins, grid-gap is a property available on grid containers that makes it easy to create gutters in your CSS Grid layouts. grid-gap itself is a shorthand for grid-row-gap and grid-column-gap, and it’s very straightforward to use.

Note that you should enable the CSS Grid flag in your browser to see the following examples correctly.

Here’s an example without any grid gaps:

html

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
</div>

css

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 200px;
  grid-template-rows: auto;
}

.item {
  background: hsl(162, 76%, 32%);
  padding: 1rem;
}
A
B
C
D
E

Now the same example with a grid gap that’s the same for rows and columns. When given only one value, grid-row-gap and grid-column-gap will be the same:

.container2 {
  display: grid;
  grid-template-columns: 1fr 1fr 200px;
  grid-template-rows: auto;

  grid-gap: 1rem;
}
A
B
C
D
E

And then different grid gaps for rows and columns:

.container3 {
  display: grid;
  grid-template-columns: 1fr 1fr 200px;
  grid-template-rows: auto;

  grid-gap: 2rem 10px;
  /* equivalent to:
  grid-row-gap: 2rem;
  grid-column-gap: 10px; */
}
A
B
C
D
E

👉 Keep in mind that with grid gaps, even when two rows or columns are not physically touching anymore, they still share the same grid line. Grid gaps don't add any new grid lines.

  Tweet It
✖ Clear

🕵 Search Results

🔎 Searching...