CSS Gap: Syntax, Usage, and Examples

The CSS gap property controls the spacing between items in layout containers like grids and flexboxes. Instead of manually applying margins to each child, you can use this property to define consistent spacing between rows and columns. It helps you build cleaner, more maintainable layouts with less code.

How to Use the CSS Gap Property

The syntax for the gap CSS property is simple. You can apply it directly to a parent element that uses either display: flex or display: grid.

.container {
  display: flex;
  gap: 20px;
}

This sets a 20-pixel gap between flex items.

You can also define separate row and column gaps with two values:

.container {
  display: grid;
  gap: 10px 20px; /* row-gap column-gap */
}

The first value applies to the space between rows, and the second applies to columns. If you only set one value, it applies to both directions.

When to Use Gap CSS

Use the gap property when you need uniform spacing between child elements in grid or flex layouts. It makes your code more readable and avoids the issues that come from inconsistent margins.

Building Flexible Layouts

With display: flex, use gap to space items in a row or column without needing to adjust margins individually:

.flex-nav {
  display: flex;
  gap: 16px;
}

This works better than margin-right because you don’t have to remove it from the last item.

Creating Grid-Based Designs

With display: grid, gap controls spacing between rows and columns:

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

This creates uniform spaces between grid items—no extra work required.

Managing Vertical Spacing in Stacked Components

If you're stacking items with flex-direction: column, gap works like vertical spacing:

.card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

You don’t need to add top or bottom margins to each element. This is clean, scalable, and easy to override.

Examples of Gap CSS in Action

Horizontal Flexbox Navigation

.navbar {
  display: flex;
  gap: 20px;
}

This evenly spaces nav links without affecting their width or requiring extra CSS rules.

CSS Grid Gap Between Cards

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}

This layout is ideal for responsive card displays, with consistent spacing on all screen sizes.

Using Column Gap CSS in Multicol Layouts

.columns {
  column-count: 3;
  column-gap: 40px;
}

This sets spacing between columns in a text or image layout that uses column-count.

Creating a Two-Value Gap

.grid-layout {
  display: grid;
  gap: 10px 20px; /* 10px between rows, 20px between columns */
}

Perfect when your layout needs different spacing in each direction.

Learn More About the CSS Gap Property

CSS Flex Gap vs Margins

Before gap was supported in flexbox, developers relied on margins to create spacing:

.item + .item {
  margin-left: 16px;
}

This approach worked but had downsides: you needed extra selectors, it didn’t handle vertical flex layouts well, and removing spacing from the last item was messy.

With css flex gap, you can apply clean spacing that adapts to layout changes:

.flex-list {
  display: flex;
  gap: 16px;
}

This works even when you switch from a horizontal to vertical layout.

CSS Grid Gap and Legacy Syntax

The old grid-row-gap and grid-column-gap properties are still valid but are now shorthand as gap. Instead of this:

.container {
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

You can use:

.container {
  gap: 10px 20px;
}

It’s more readable and covers both row and column gaps in one line.

CSS Table Cell Gap Alternatives

Traditional HTML tables don’t support gap directly. If you want spacing between table cells, use border-spacing:

table {
  border-collapse: separate;
  border-spacing: 8px;
}

While this doesn’t use the gap property, it achieves a similar effect. You can’t apply gap directly to <table> elements unless you’re using display: grid for table-like layouts.

Responsive Design with Gap

Use relative units like em, rem, or % to make gaps adapt to screen sizes:

.responsive-grid {
  display: grid;
  gap: 1.5rem;
}

This keeps your spacing flexible and consistent across different devices.

Animating Gap

You can animate gap changes using transitions:

.animated-flex {
  display: flex;
  gap: 10px;
  transition: gap 0.3s ease;
}

.animated-flex:hover {
  gap: 30px;
}

This creates a subtle spacing animation that reacts to hover or other interaction states.

Browser Support for CSS Gap in Flexbox

Flexbox support for gap is now reliable in all major browsers, including Chrome, Firefox, Safari, and modern versions of Edge. Older browsers like Internet Explorer and early versions of Safari do not support gap in flexbox, though it’s always been supported in CSS grid.

Fallback for Older Browsers

If you need to support older browsers that don’t recognize gap in flexbox, use margins as a fallback:

.flex-container {
  display: flex;
  gap: 16px;
}

.flex-container.no-gap .item:not(:last-child) {
  margin-right: 16px;
}

Use a class like .no-gap conditionally, or apply this via feature detection in JavaScript or CSS hacks.

Nested Gaps in Layouts

When combining grid and flex layouts, gap works at multiple levels. For example:

.grid-wrapper {
  display: grid;
  gap: 20px;
}

.grid-wrapper .card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

This gives you full control over horizontal and vertical spacing across nested containers.

The CSS gap property simplifies layout spacing across grids, flex containers, and columns. With one clean rule, you can apply consistent, flexible spacing without the quirks of margin-based layouts.