The gap property in Flexbox is used to define consistent spacing between flex items without the need for margins on individual items. It simplifies layout spacing and avoids margin collapse issues.

Key Points

1
gap: <length>; sets the spacing between all flex items along the main and cross axes.
2
Supports row-gap and column-gap for specifying different spacing in rows and columns.
3
Works with both flex and grid containers.

Example: Using gap in Flexbox

In this example, gap: 20px ensures that all items inside the flex container have a uniform 20px spacing between them without adding individual margins.

Difficulty: 3/10

Topics: flexbox layout, spacing control, responsive design

Scenario Questions

0-2 years experience

1
You're building a card grid with 4 items in a row, and they're too close together. How would you use gap to add even spacing between them without messing up the alignment?
2
If you set gap: 20px on a flex container but the items still look unevenly spaced, what’s the most likely mistake someone made?
3
You have a flex row with three buttons and want 10px between them. How do you write the CSS to make that happen?

2-5 years experience

1
A designer says the spacing between cards in our mobile feed looks off when the screen shrinks — the gap stays fixed but the cards wrap. How would you debug and fix this?
2
Our team uses margin-right: 16px on flex items to create spacing, but it causes overflow on the last item. Why is gap a better solution here, and what edge case might you still need to handle?
3
A flex layout with gap works fine in Chrome but breaks in Safari. What could be the issue, and how would you verify and resolve it?

5-8 years experience

1
You're designing a dynamic dashboard with variable numbers of widgets in a flex container. How would you use gap to ensure consistent spacing across breakpoints while avoiding layout shifts on resize?
2
In a high-performance UI, we’re using gap instead of margins for spacing. What performance implications should you consider when animating or reflowing hundreds of flex items with gap?
3
A legacy component uses padding on the container to simulate spacing. You want to migrate to gap. What compatibility, accessibility, or layout stability risks should you evaluate before rolling it out?

8+ years experience

1
We’re standardizing our design system across 12 product teams. Should we enforce gap as the sole spacing mechanism for flex containers? What tradeoffs do you weigh between consistency, browser support, and legacy code debt?
2
Our CSS architecture uses a utility-first framework. How would you design a scalable, maintainable spacing system that integrates gap with other layout primitives without creating combinatorial explosion?
3
A major browser is deprecating margin-based spacing patterns. How would you lead a cross-team migration from legacy flex spacing to gap, including testing strategy, fallbacks, and developer education?

Follow-up Questions

❓What happens if you use gap on a non-flex container?
❓How does gap behave when flex items wrap?
❓Can you combine gap with margin on flex items? What might go wrong?