🔗 gap — Controlling Spacing in CSS Grid

🌐 What is gap in CSS Grid?

The gap property (formerly grid-gap) controls the spacing between rows and columns inside a grid container. It is one of the simplest yet most powerful layout tools in CSS Grid. Instead of using margins on individual items, gap creates consistent, automatic spacing throughout the layout.

>>“gap makes clean, consistent spacing effortless — no more margin hacks.”

📌 The 3 Gap Properties

PropertyMeaning
gapSets both row and column gaps
row-gapSets vertical spacing
column-gapSets horizontal spacing

🧪 Basic Example

Simple Grid Gap

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

This adds 20px spacing between all rows and columns.

🎯 Setting Row and Column Gaps Separately

Separate Gaps

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

• Vertical spacing → 10px • Horizontal spacing → 30px

📐 Shorthand for Two Values

When you pass two values to gap:

gap: row column

gap: 10px 30px;
/* row-gap = 10px, column-gap = 30px */

🧱 Using gap in Responsive Grids

Responsive Gallery

.gallery {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Perfect for image galleries, card layouts, and dashboards.

Media content

🧠 gap vs margin → What's the Difference?

gapmargin
Only affects space between grid itemsCreates space outside an item
Never collapsesVertical margins can collapse
Cleaner & automaticRequires manual adjustment
No effect on container edgesMargin adds space around edges too

Note

💡 Use gap for item-to-item spacing. Use margin for spacing outside the grid.

📦 gap in Nested Grids

Nested Grid Example

.card {
  display: grid;
  gap: 12px;
  grid-template-rows: auto 1fr auto;
}

Ideal for cards with header, content, and footer.

🧩 gap with Flexbox (Bonus Tip)

Modern browsers also support gap for flexbox layouts. Same syntax, same behavior!

Flexbox Gap

.buttons {
  display: flex;
  gap: 12px;
}

Note

⚠️ Older browsers (like early Safari versions) don’t support flexbox gap.

⚠️ Common Mistakes

  • Using margin instead of gap for grids
  • Expecting gap to add spacing outside the grid container
  • Using px gaps for responsive layouts (try %, rem, or em instead)
  • Setting negative gaps (not allowed)

🔥 Summary

The gap property simplifies spacing in CSS Grid by adding consistent, maintainable spacing between grid items. Whether you're building galleries, cards, dashboards, or product listings,gap keeps your layout clean and visually balanced.

>>“When layout spacing feels perfect, gap is usually behind the magic.”

Learn more onMDN Docs 📘