CSS: gap

The gap property adds consistent space between Grid or Flexbox tracks without adding margins to each child.

Minimal example

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
}

The first value controls row spacing and the second controls column spacing. A single value applies the same gap in both directions.

Common mistakes

• Apply gap to the Grid or Flexbox container, not to an individual child.
• Remember that gap adds space between tracks; it does not necessarily add outer padding.
• Check browser support and fallbacks when targeting older environments.