Gap
The space between items inside a flex or grid container.
Plain English
Gap is the simplest way to add consistent spacing between elements in a row or grid. Instead of adding margin to every child element (which creates awkward edge cases), you set gap once on the parent and every item gets equal breathing room between it and its neighbours.
Technical
The gap property (and its longhand row-gap / column-gap) sets the gutters between flex items and grid cells. It does not apply to the outer edges of the container — only between items. Replaces the older grid-gap shorthand. Works in all modern browsers for both Flexbox and Grid contexts.
Live Demo
Flex Row
No gap — touching
gap-4 — breathing room
CSS Grid (6 items)
No gap
gap-3 — distinct cells
Gap adds space between flex or grid children without affecting outer edges.
Usage
✓ Good usage
Set gap: 16px on a flex container to create consistent spacing between all sibling items without adding margin to each child.
✗ Bad usage
Adding margin-right to every flex child except the last one using :last-child — this is the problem gap was designed to solve.
Recommended values
- 4px — micro gaps (icon-label pairs, badge internals)
- 8px — tight inline groups (button icon + text)
- 12px — compact lists
- 16px — standard card grids and form fields
- 24px — section-level grids
- 32px — loose page-level grids
Common mistakes
- Confusing gap (between items) with padding (inside the container edge).
- Setting gap on a child element instead of the parent.
- Forgetting gap works differently from margin: it does not collapse.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use gap: 16px between cards in the grid, gap: 8px between the icon and label inside each card, and gap: 24px between major page sections.