Part 18: Gap Utilities: Row-Gap & Column-Gap in Flexbox

Historically, spacing flex items required margin hacks (margin-right on all items except the last child via :last-child). Tailwind's gap utilities eliminate this entirely.

1. The gap-* Utility

gap-* sets uniform spacing between rows and columns: - gap-4: 1rem (16px) space between every item. - gap-x-6: Horizontal space between items. - gap-y-3: Vertical space between wrapped rows.

<div class="flex flex-wrap gap-x-6 gap-y-4">
  <div class="p-4 bg-slate-200 rounded">Item 1</div>
  <div class="p-4 bg-slate-200 rounded">Item 2</div>
  <div class="p-4 bg-slate-200 rounded">Item 3</div>
</div>

2. Gap vs. space-x-*

Key Takeaways

• Always prefer gap-* over space-x-* in flex and grid containers.
• Use gap-x-* and gap-y-* for asymmetrical spacing.

In Part 19, we explore Flex Order & Alignment Baseline!