CSS grid-column-gap Property

What You’ll Learn

The grid-column-gap property controls the horizontal space between columns in a CSS grid layout.

Introduction

The grid-column-gap property in CSS is used to define the space (or gap) between the columns in a grid layout. This property helps in creating a visually appealing and organized structure for grid-based layouts by ensuring consistent spacing between columns.

Definition and Usage

Set grid-column-gap on a grid container with display: grid. It adds space only between column tracks, not on the outer left or right edges of the grid. For modern projects, column-gap is the standard name, but grid-column-gap behaves the same way in grid layouts.

📝 Syntax

The syntax for the grid-column-gap property is simple and accepts a length value:

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

Here, value can be any valid CSS length unit, such as px, em, %, rem, etc.

Basic Example

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

Default Value

The default value of the grid-column-gap property is 0. This means that, by default, there is no space between the columns in a grid layout.

Syntax Rules

• Applies to grid containers only, not individual grid items.
• Accepts length and percentage values.
• Legacy alias of column-gap in grid layouts.
• The property is not inherited.
• Gap appears only between columns, not on the container edges.

💎 Property Values

Examples Gallery

Add 20 pixels of column gap, compare with no gap, try rem units, and combine with row gap for asymmetric spacing.

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

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

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

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

♿ Accessibility

• Use adequate gap so clickable items are not too close together on touch screens.
• 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 between items and background clear even with spacing.

💡 Best Practices