CSS Grid Gap

gap puts space between grid tracks. It is the same property you saw in flexbox, which is nice.

1
2
3
4
5
6
7
8
9

<style>
  .grid > div { background: #d0e8f2; border: 1px solid #1a5276; padding: 10px; }
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); }
  .a { gap: 4px; }
  .b { gap: 24px 8px; }
</style>
<div class="grid a"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>
<br>
<div class="grid b"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

Older code uses grid-gap, the original name. It still works, but gap is the standard.

Why gap and not margins

• It only appears between tracks, not around the outside, so you never have to remove an edge margin.
• It does not double up or collapse.
• It works with fr units without breaking the calculation.

Use padding for the outside

If you want space around the whole grid, put padding on the container: padding: 16px. Gap is only the inner space.