CSS gap Property

What You’ll Learn

The gap property adds consistent space between items in grid and flex layouts without margin on every child.

Introduction

The gap property in CSS is a shorthand for setting the row-gap and column-gap properties in grid and flexbox layouts. It defines the space between rows and columns, making it easier to control the layout of your content with consistent spacing.

Definition and Usage

Before gap, developers often used margins on each child to create space between grid or flex items. That approach is harder to maintain and can cause unwanted outer spacing. gap applies spacing only between items, keeping the container edges clean.

📝 Syntax

The syntax for the gap property allows you to specify the space for rows and columns in a grid or flex container:

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

• row-gap is the space between rows.
• column-gap is the space between columns.

If only one value is provided, it applies to both rows and columns.

Basic Example

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

Default Value

The default value of the gap property is normal, which typically results in no space between rows and columns unless otherwise defined.

Syntax Rules

• Shorthand for row-gap and column-gap.
• One value sets both axes; two values set row then column.
• Works on grid containers and flex containers in modern browsers.
• The property is not inherited by child elements.
• Gap creates space only between tracks or items, not on the outer edges of the container.

💎 Property Values

Examples Gallery

Create space between items in a grid container, then explore flexbox gap, separate row/column gaps, and rem-based spacing.

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

.toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 12px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 1rem;
}

♿ Accessibility

• Use sufficient gap between interactive elements so touch targets are easy to tap on mobile.
• Prefer rem for gap so spacing scales when users change root font size.
• Do not rely on gap alone for semantic grouping; use headings and landmarks for structure.
• Test wrapped flex layouts to ensure gap spacing remains readable at narrow widths.
• Keep contrast on items inside gapped layouts; spacing does not replace color contrast requirements.

💡 Best Practices