What does gap do in flexbox and grid?
PICTURE THIS: FLEX VS GRID
Flex — one line
Grid — rows + cols
Simple meaning
It sets spacing between items without margin hacks.
WHY — CSS instead of guessing?
Why interviewers care about CSS:
CSS questions separate people
who only read docs from people who shipped.
Keep it short, concrete,
and tied to Frontend work.
Stay structured
Name the idea, why it exists, then one short example.
Close cleanly
End with when you use it and one common pitfall.
STEPS — What happens step by step?
Before you speak the answer, walk the interviewer through these steps:
- 1It sets spacing between
items without margin hacks.
- 2Why it exists
Cleaner than margin on children.
- 3How it works
Browser support is strong now.
- 4Give an example
One tiny concrete case you can say aloud.
- 5Common mistake
What juniors usually get wrong.
- 6Close
When you pick this over the alternative.
EXAMPLE — See it in action
Here's a short line you can speak, broken into clear beats:
Say this line
“Cleaner than margin on children.”
Break into beats
Cleanerthanmarginonchildren
Speaking order
298740833747163290
Note: Adapt this scaffold to your own project — keep it under 60–90 seconds.
Key takeaway
It sets spacing between items without margin hacks. Cleaner than margin on children.