How do you add gaps between grid cells?

Use grid-row-gap and grid-column-gap (or the gap shorthand) to insert spacing between rows and columns — gaps appear only between cells, never at the outer edges.

Rather than fiddling with margins on every item (which double up and fight each other), Grid has dedicated gutter properties:

.container {
  display: grid;
  grid-row-gap: 20px;     /* vertical space between rows */
  grid-column-gap: 10px;  /* horizontal space between columns */

  /* Or the shorthand — row-gap then column-gap: */
  gap: 20px 10px;
}

Important: gaps sit between tracks only. The first and last grid lines stay flush with the container edges, so you never get unwanted padding around the outside — exactly the behavior margins make hard to achieve.

Modern syntax: the un-prefixed row-gap, column-gap, and gap are the current standard, and the very same properties now work in Flexbox too.