The gap (previously called grid-gap) property in CSS Grid is used to create consistent spacing between grid rows and columns without adding extra margins to grid items.

Key Points

1
Defines the space between rows and columns in a grid layout.
2
Can be specified as a single value (applies to both rows and columns) or two values (row-gap and column-gap).
3
Improves readability and layout consistency by avoiding manual spacing on individual grid items.
4
Works in both CSS Grid and Flexbox (as gap in Flexbox).
5
Example: gap: 20px; adds 20px spacing between all rows and columns.

Example: Using gap in a Grid

Difficulty: 3/10

Topics: grid-gap, layout spacing, CSS grid

Scenario Questions

0-2 years experience

1
You're building a product grid with 3 columns, but the items are squished together — how would you use gap to fix it?
2
If you set gap: 20px on a grid but the layout still looks cramped, what’s the first thing you’d check?
3
You set gap: 1rem on a grid container, but the spacing only appears vertically — why might that be?

2-5 years experience

1
A designer says the spacing between cards in our dashboard grid looks inconsistent on mobile — you’ve used gap, but it’s not working as expected. How do you debug this?
2
Your team’s grid layout breaks when content overflows — you suspect gap is part of the issue. What’s your investigation plan?
3
We’re migrating from margin-based spacing to CSS grid with gap, but now our responsive breakpoints behave differently. What’s likely causing this?

5-8 years experience

1
You’re designing a dynamic grid component that adapts to user-defined column counts — how do you ensure gap remains visually consistent across all screen sizes and content loads?
2
Our grid-based component is used in 12 different products with varying theme tokens — how do you architect gap values to be maintainable and theme-aware without hardcoding?
3
A performance audit shows layout thrashing in our grid-heavy dashboard. Could gap be contributing? How would you verify and optimize?

8+ years experience

1
We’re standardizing our design system across 50+ teams using CSS grid — how do you decide whether to enforce gap as a token, a utility, or a component prop, and what tradeoffs do you weigh?
2
Legacy code uses margin-based spacing in grids; migrating to gap requires breaking changes. How do you plan and communicate this migration to avoid regressions across products?
3
Our grid system is used in high-traffic pages with dynamic content. How would you evaluate whether gap impacts layout stability, repaint performance, or accessibility at scale?

Follow-up Questions

❓What happens if you set gap but forget to define grid-template-columns?
❓How does gap behave differently in flexbox vs grid?
❓Would gap affect the size of the grid container itself?