CSS grid-gap Property

What You’ll Learn

The grid-gap property sets the space between rows and columns in a CSS grid layout using one shorthand declaration.

Introduction

The grid-gap property in CSS is used to define the space between grid items in a CSS Grid layout. This property is a shorthand for the grid-row-gap and grid-column-gap properties, allowing you to set the gaps between rows and columns simultaneously. It helps in creating well-spaced and visually appealing grid layouts.

Definition and Usage

Set grid-gap on a grid container with display: grid. One value applies the same spacing to rows and columns. Two values let you set row gap first, then column gap. For new projects, the modern gap property is preferred, but grid-gap behaves the same in grid layouts.

📝 Syntax

The syntax for the grid-gap property is straightforward and can accept one or two values:

.container {
  grid-gap: row-gap column-gap;
}

• If one value is specified, it applies to both rows and columns.
• If two values are specified, the first value applies to the row gap, and the second value applies to the column gap.

Basic Example

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

Default Value

The default value for the grid-gap property is 0, meaning no gap between grid items.

Syntax Rules

• Applies to grid containers only, not individual grid items.
• Shorthand for grid-row-gap and grid-column-gap.
• Legacy alias of gap in grid layouts.
• The property is not inherited.
• Gap appears only between tracks, not on container edges.

💎 Property Values

Examples Gallery

Add 20px gap on all sides, compare with no gap, use two values for asymmetric spacing, and try rem units.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.no-gap { grid-gap: 0; }
.with-gap { grid-gap: 16px; }

.card-grid {
  grid-gap: 12px 24px;
}

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

♿ Accessibility

• Use adequate gap so touch targets are not too close together on mobile.
• Prefer rem units so spacing scales with user font preferences.
• Do not rely on gap alone for visual grouping; use headings and landmarks.
• Test zoom levels to ensure gaps remain readable at 200% zoom.
• Keep contrast clear between items and background even with spacing.

💡 Best Practices