Gap sets space between flex or grid items without touching the outer edges. Cleaner than margin on every child.
When to use
Any flex or grid layout where siblings need consistent spacing. Prefer gap over child margins.
Class combinations
Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.
Flex list spacing
flex flex-col gap-3Vertical stack with even spacing. Cleaner than margin-bottom on every child except the last.
Split row and column gap
grid gap-x-6 gap-y-3Different horizontal and vertical rhythm, useful in form grids where columns need more air.
Summary
- gap sets gutters between flex or grid items without adding margin to each child.
- row-gap and column-gap split control when you need different vertical and horizontal rhythm.
- Gap does not apply to the outer edge of the container, only between items, so it avoids double-spacing at boundaries.
- When items wrap, gap applies consistently between rows and columns, which is harder to replicate with margin alone.
- Tailwind gap-* utilities are the same scale as margin and padding. Keep all three aligned for visual rhythm.