CSS Grid Gap — Spacing Between Grid Items

The gap property adds space between grid tracks (rows and columns) without adding space at the outer edges. It’s the cleanest way to space grid items — no negative margins or calc() tricks needed.

Use the CSS Grid Generator to visualize grid layouts with spacing.

Basic gap syntax

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  gap: 1rem;              /* same gap for rows and columns */
  gap: 1rem 2rem;         /* row-gap column-gap */
  row-gap: 1rem;          /* rows only */
  column-gap: 2rem;       /* columns only */
}

gap is shorthand for row-gap and column-gap.

What gap affects

gap only adds space between tracks — not at the outer edges of the grid:

gap: 1rem

No gap    ← 1rem → No gap
┌──────┐  ┌──────┐  ┌──────┐
│  1   │  │  2   │  │  3   │
└──────┘  └──────┘  └──────┘
    ↕ 1rem
┌──────┐  ┌──────┐  ┌──────┐
│  4   │  │  5   │  │  6   │
└──────┘  └──────┘  └──────┘
No gap ↑                     No gap ↑

To add outer spacing, use padding on the grid container:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1.5rem;  /* outer spacing matches inner gap */
}

Responsive gap with clamp()

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);  /* scales from 12px to 24px */
}

Asymmetric gaps

/* Card grid with more vertical spacing: */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.5rem;   /* horizontal between columns */
  row-gap: 2.5rem;      /* vertical between rows */
}

/* Or using the shorthand: */
gap: 2.5rem 1.5rem;   /* row-gap column-gap */

Gap units

/* Fixed units: */
gap: 16px;
gap: 1rem;
gap: 24pt;

/* Relative: */
gap: 2%;      /* percent of the grid container's width */
gap: 1em;     /* relative to font-size */
gap: 2vw;     /* viewport-relative */

/* Dynamic: */
gap: clamp(8px, 2vw, 24px);

/* None: */
gap: 0;

Gap vs margin on items

Using gap is better than margins on items:

/* AVOID: margin on items causes double-spacing on edges */
.grid-item {
  margin: 0.5rem;  /* Creates 1rem gap between items, 0.5rem on edges */
}

/* AVOID: negative margin hack */
.grid {
  margin: -0.5rem;
}
.grid-item {
  margin: 0.5rem;
}

/* PREFER: gap handles it cleanly */
.grid {
  gap: 1rem;
  /* No outer gap at container edges */
}

Adding borders between items

gap creates empty space, not borders. For lines between items, use:

/* Option 1: Box-shadow simulation of border: */
.grid-item {
  box-shadow: 1px 0 0 0 #e5e7eb, 0 1px 0 0 #e5e7eb,
              1px 1px 0 0 #e5e7eb, inset 1px 0 0 0 #e5e7eb,
              inset 0 1px 0 0 #e5e7eb;
}

/* Option 2: background-color on the container with gap 1px: */
.grid {
  background-color: #e5e7eb;  /* "border" color */
  gap: 1px;                    /* gap becomes the border */
}

.grid-item {
  background-color: white;    /* item color hides the grid background */
}

The background-color trick is elegant for table-like grids.

Gap in flexbox

gap also works in Flexbox (all modern browsers):

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Same behavior — space between items, not at outer edges.

Browser support

gap (the unprefixed version) has universal support in all modern browsers since 2020. The older grid-gap prefix is supported everywhere too, but the unprefixed gap works for both Grid and Flexbox.

/* Safe to use without prefixes: */
.grid {
  gap: 1rem;
}

/* No longer needed: */
.grid {
  grid-gap: 1rem;  /* older syntax, still works */
  gap: 1rem;       /* new syntax — prefer this */
}

Practical spacing system

:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
}

.card-grid    { gap: var(--space-lg); }
.icon-grid    { gap: var(--space-sm); }
.section-grid { gap: var(--space-xl); }

Related tools

• CSS Grid Generator — build and visualize grid layouts
• CSS Grid minmax() — flexible track sizing
• CSS Grid vs Flexbox — choosing the right layout system