The `gap` Property: Spacing Without Margin Hacks
The gap property adds space *between* elements in a layout, not around them. Use it on Flexbox, Grid, or multi-column containers for clean, consistent gutters.
Why it exists
Before gap, creating consistent spacing between layout items required complex margin hacks. Developers used selectors like :not(:last-child) or negative margins on the parent container to remove unwanted space on the edges, which was brittle and hard to maintain.
The mental model
Think of gap as defining invisible "gutters" that live only between the rows and columns of your layout. It's a property of the container, not the children. The children are placed, and then the gap is inserted between them, ensuring no extra space is added to the outside edges.
How it works
The gap property is a shorthand for row-gap and column-gap. You apply it to a container with display: grid, display: flex, or a multi-column setup. A single value (gap: 1rem;) applies to both rows and columns. Two values (gap: 1rem 2rem;) set the row-gap and column-gap respectively. It accepts any standard CSS length unit, like px, rem, or percentages.
When to use it
Use gap whenever you need consistent spacing between items in a Grid, Flexbox, or multi-column layout. It is the cleanest and most direct way to create internal gutters, especially in responsive designs where the number of items per row might change.
When not to use it
Do not use gap if you need space on the outside edges of your container. gap only works on the interior spaces between elements. For outer spacing, use the padding property on the container itself. It has no effect on elements that are not a grid, flex, or multi-column container.
One canonical example
To create a grid of cards with 16 pixels of space between each row and column, you would set display: grid; on the container and then add gap: 16px;. This single line replaces complex margin calculations and ensures perfect, consistent spacing between all cards.
Interview question
To achieve consistent spacing only between items within a Flexbox container, without adding space to the container's outer edges, which CSS property should be applied to the container?
- a.gap on the containerCorrect
- b.margin on the child elements, using :not(:last-child) selectors
- c.margin on the container itself
- d.padding on the container
Why? this is the answer
The 'gap' property is designed to add space exclusively between layout items, not around them or on the container's edges. Using 'margin' on child elements with complex selectors was the 'hack' that 'gap' was created to replace, and 'padding' adds space around the container's content, not just between siblings.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles