SmartCodingTips

Gap and Order Utilities

Tailwind provides easy-to-use utilities to control spacing between flex/grid items and change their visual order — without changing the HTML source order.

1️⃣ Spacing Between Items with gap

Instead of adding margins manually to each child, use gap utilities on the flex container.

  • gap-2: Applies a 0.5rem gap between all children
  • gap-x-4: Horizontal spacing only
  • gap-y-4: Vertical spacing only
<div class="flex gap-4">
  <div class="bg-indigo-500 text-white p-4">Item 1</div>
  <div class="bg-pink-500 text-white p-4">Item 2</div>
  <div class="bg-yellow-500 text-white p-4">Item 3</div>
</div>
Item 1
Item 2
Item 3

2️⃣ Reordering Items with order

You can visually rearrange flex items using order-{n} utility classes.

  • order-1, order-2, etc. to set order index
  • order-first and order-last for convenience
  • order-none: default
<div class="flex gap-4">
  <div class="bg-red-500 text-white p-4 order-3">Item 1 (order-3)</div>
  <div class="bg-blue-500 text-white p-4 order-1">Item 2 (order-1)</div>
  <div class="bg-green-500 text-white p-4 order-2">Item 3 (order-2)</div>
</div>
Item 1 (order-3)
Item 2 (order-1)
Item 3 (order-2)

🧠 Use Cases

  • Use gap for cleaner spacing without extra margin classes
  • Use order to rearrange UI on different breakpoints (e.g., md:order-1)

✅ Tip: Combine order with responsive prefixes for mobile-first reordering!

← Previous: Justify Content & Align Items Next: Creating Real Layouts with Flexbox →