ویژگی gap برای تعیین فاصله‌ی بین ستون‌ها و ردیف‌های Grid یا Flexbox استفاده میشه (ولی روی خود آیتم‌ها اثری نداره، فقط فاصله بینشون رو تنظیم می‌کنه).

1) gap کلی (هم ردیف هم ستون)

<div class="grid grid-cols-3 gap-4">
  <div class="bg-coral">1</div>
  <div class="bg-coral">2</div>
  <div class="bg-coral">3</div>
</div>

🔹 gap-4 یعنی هم فاصله‌ی بین ستون‌ها و هم ردیف‌ها ۱rem (16px) باشه.

2) فقط فاصله‌ی بین ستون‌ها (gap-x)

<div class="grid grid-cols-3 gap-x-8">
  <div class="bg-coral">1</div>
  <div class="bg-coral">2</div>
  <div class="bg-coral">3</div>
</div>

🔹 gap-x-8 فقط فاصله‌ی افقی (بین ستون‌ها) رو زیاد می‌کنه.

3) فقط فاصله‌ی بین ردیف‌ها (gap-y)

<div class="grid grid-cols-2 gap-y-6">
  <div class="bg-coral">1</div>
  <div class="bg-coral">2</div>
  <div class="bg-coral">3</div>
  <div class="bg-coral">4</div>
</div>

🔹 gap-y-6 فقط فاصله‌ی عمودی (بین ردیف‌ها) رو زیاد می‌کنه.

4) مقادیر gap در Tailwind

Tailwind از مقیاس spacing خودش استفاده می‌کنه:

• gap-0 → بدون فاصله

• gap-1 → 0.25rem (4px)

• gap-2 → 0.5rem (8px)

• gap-4 → 1rem (16px)

• gap-8 → 2rem (32px)

• … تا gap-96

5) gap در Flexbox

فقط مخصوص Grid نیست! روی Flexbox هم کار می‌کنه:

<div class="flex gap-4">
  <div class="bg-coral">A</div>
  <div class="bg-coral">B</div>
  <div class="bg-coral">C</div>
</div>

🔹 آیتم‌های Flex به هم 16px فاصله گرفتن.

✅ خلاصه:

• gap-n → فاصله بین همه‌ی ستون‌ها و ردیف‌ها

• gap-x-n → فقط فاصله افقی

• gap-y-n → فقط فاصله عمودی

• قابل استفاده در Grid و Flexbox