Detailed explanation
The CSS gap property defines spacing between items in grid and flex layouts. It is a shorthand for row-gap and column-gap: one value applies to both, while two values specify row spacing first and column spacing second. For example, gap: 16px 24px creates 16px row gaps and 24px column gaps. Its main benefit is that spacing belongs to the layout container rather than individual children, making the relationship between layout and spacing explicit and easier to maintain.
In a grid, gaps form gutters between adjacent tracks. With .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }, the browser creates three equal-width columns, separated by two 24px gutters, and adds 16px between rows. For a container with a definite width, those gutters consume space before the remaining space is divided among the 1fr columns. This matters because manually assigning each column one-third of the container width and then adding gaps can cause overflow.
In a flex container, .flex-row { display: flex; gap: 12px; } spaces neighbouring items by 12px without adding spacing before the first item or after the last. With flex-direction: row, column-gap separates items within a line, and row-gap separates wrapped lines when flex-wrap: wrap creates multiple lines. With flex-direction: column, row-gap separates items within each column, while column-gap separates wrapped columns. Under the hood, these gaps participate in layout calculations: they consume available space and can affect whether flex items fit on one line or wrap.
Compared with child margins, gap avoids edge-reset selectors and makes adding, removing, or reordering items simpler. However, margins do not always require edge resets; a carefully chosen sibling selector can avoid outer margins too. Use padding for space between the container boundary and its content, and margins for item-specific offsets. Also, gap is not necessarily the final visible distance: margins or distributed alignment such as justify-content: space-between can add more space. Interviewers look for correct shorthand ordering, understanding of flex direction, and a clear distinction between internal gaps and outer spacing.
Key points to remember
- gap is shorthand for row-gap and column-gap; two values use that order.
- Set gap on the grid or flex container, not its individual children.
- Gaps separate items or tracks without adding outer-edge spacing.
- Flex direction determines which gap separates items and which separates wrapped lines.
- Gaps consume layout space, affecting grid track sizing and flex wrapping.
Common mistakes candidates make
- Reversing the shorthand order and interpreting gap: 16px 24px as column spacing followed by row spacing.
- Expecting gap to provide container padding or to space children in an ordinary block layout.
- Assuming gap guarantees the exact visible distance even when margins or distributed alignment add spacing.
Likely follow-up questions
How is gap different from margin and padding?
Gap provides spacing between items or tracks through their layout container, while margin adds space outside an individual element. Padding adds space inside an element's boundary, so container padding is appropriate when you also need spacing around the content.
How does gap behave when flex items wrap?
For flex-direction: row with flex-wrap: wrap, column-gap separates items within each line and row-gap separates lines. For flex-direction: column, row-gap separates items within a column and column-gap separates wrapped columns.
Can gap replace justify-content: space-between?
Not directly: a length-based gap specifies a consistent gutter, while space-between distributes available free space between items. You can combine them, but the resulting separation may exceed the specified gap.
Interview tip: Define gap, explain one grid or flex example, and finish by distinguishing between-item spacing from container padding.