Tailwind Gap Utilities

What Is the Gap Utility?

gap-* maps to the CSS gap property, which adds space between flex or grid items without adding any space before the first item or after the last one, unlike margin-based approaches.

gap-x-* and gap-y-* let you control horizontal and vertical spacing independently, which is especially useful in grid layouts with both rows and columns.

<div class="flex flex-wrap gap-4">
  <span class="rounded-lg bg-slate-100 px-4 py-2">Tag A</span>
  <span class="rounded-lg bg-slate-100 px-4 py-2">Tag B</span>
  <span class="rounded-lg bg-slate-100 px-4 py-2">Tag C</span>
</div>

Every tag has equal spacing on all sides, including when they wrap onto a new line.

Gap Utility Syntax

class="gap-4"       /* both axes */
class="gap-x-4"     /* horizontal only */
class="gap-y-4"     /* vertical only */

• gap-{n} sets spacing for both rows and columns using the spacing scale.
• gap-x-* sets horizontal (column) spacing only.
• gap-y-* sets vertical (row) spacing only.
• Gap only works on flex or grid containers; it has no effect on regular block elements.

Gap Utilities Cheatsheet

Common gap values and combinations for flex and grid layouts.

gap vs space-y/space-x Utilities

gap-* only works inside flex/grid containers and uses the native CSS gap property. space-y-*/space-x-* work on any container by adding margin to children and can be used even without flex or grid, but they don't support wrapping as cleanly as gap does.

Using Different Horizontal and Vertical Gaps

Grids often look better with different spacing values for rows versus columns. gap-x-* and gap-y-* let you fine-tune each independently instead of using one uniform gap-* value.

<div class="grid grid-cols-3 gap-x-6 gap-y-10">
  <div class="rounded-lg bg-slate-100 p-4">1</div>
  <div class="rounded-lg bg-slate-100 p-4">2</div>
  <div class="rounded-lg bg-slate-100 p-4">3</div>
  <div class="rounded-lg bg-slate-100 p-4">4</div>
  <div class="rounded-lg bg-slate-100 p-4">5</div>
  <div class="rounded-lg bg-slate-100 p-4">6</div>
</div>

Rows get more breathing room (gap-y-10) than the tighter columns (gap-x-6).

Why Gap Works Better With flex-wrap

Because gap is a native CSS layout property, it correctly spaces items even when they wrap onto multiple lines, including consistent spacing between rows, something margin-based spacing tricks historically struggled to do without extra wrapper markup.

<div class="flex flex-wrap gap-3">
  <!-- Any number of tags, gap stays consistent even after wrapping -->
</div>

Common Mistakes

• Applying gap-* to an element that isn't flex or grid, where it silently has no effect.
• Using margin-based spacing between wrapped flex items instead of gap-*, causing uneven row spacing.
• Not using gap-x-*/gap-y-* when rows and columns should have visually different spacing.
• Forgetting that older browsers had partial gap support for flexbox; this is rarely an issue today but worth knowing for legacy projects.
• Mixing gap-* and manual margins on the same children, leading to inconsistent, doubled-up spacing.

Key Takeaways

• gap-* adds spacing between flex or grid children without extra space at the container's edges.
• gap-x-* and gap-y-* allow independent horizontal and vertical spacing control.
• Gap requires a flex or grid display value on the same element to have any effect.
• Gap handles wrapped flex rows more predictably than margin-based spacing tricks.
• Prefer gap-* over manual child margins whenever the parent is already a flex or grid container.