Tailwind ابزار خیلی راحتی برای کار با CSS Grid داره. فقط کافیه کلاس‌هاشو استفاده کنی، دیگه نیازی به نوشتن دستی grid-template-columns و … نیست.

1) فعال‌سازی Grid

برای اینکه یه کانتینر Grid داشته باشیم:

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

📌 کلاس grid المان رو تبدیل به Grid Container می‌کنه.

2) تعداد ستون‌ها (grid-cols)

در Tailwind تعداد ستون‌ها رو اینطوری مشخص می‌کنی:

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

🔹 grid-cols-3 یعنی ۳ ستون مساوی
🔹 gap-4 یعنی فاصله بین سلول‌ها (۱rem)

3) تعداد ردیف‌ها (grid-rows)

Tailwind ردیف‌ها رو هم پشتیبانی می‌کنه:

<div class="grid grid-rows-3 gap-2 h-48">
  <div class="bg-coral">1</div>
  <div class="bg-coral">2</div>
  <div class="bg-coral">3</div>
</div>

4) span کردن ستون و ردیف‌ها

می‌تونی المان رو روی چند ستون یا ردیف بکشونی:

<div class="grid grid-cols-4 gap-2">
  <div class="col-span-2 bg-coral">1 (col-span-2)</div>
  <div class="bg-coral">2</div>
  <div class="bg-coral">3</div>
  <div class="row-span-2 bg-coral">4 (row-span-2)</div>
  <div class="bg-coral">5</div>
  <div class="bg-coral">6</div>
</div>

5) alignment (ترازبندی)

Tailwind برای ترازبندی آیتم‌ها هم کلاس داره:

• افقی (justify)

  • justify-start

  • justify-center

  • justify-end

  • justify-between

  • justify-around

  • justify-evenly

• عمودی (items)

  • items-start

  • items-center

  • items-end

  • items-stretch

مثال:

<div class="grid grid-cols-3 h-40 items-center justify-center gap-2">
  <div class="bg-coral p-4">1</div>
  <div class="bg-coral p-4">2</div>
  <div class="bg-coral p-4">3</div>
</div>

6) grid-template-areas در Tailwind (با plugin)

Tailwind به صورت پیش‌فرض grid-template-areas نداره، اما با پلاگین‌ها (مثل tailwindcss-grid-areas) می‌شه اضافه کرد.
معمولاً برای layout پیچیده از همون grid-cols + col-span استفاده می‌کنیم.

7) مثال کامل Layout در Tailwind

<div class="grid grid-cols-4 grid-rows-3 gap-4 h-screen text-white text-center">
  <header class="col-span-4 bg-blue-500 p-4">Header</header>
  <nav class="row-span-2 bg-green-500 p-4">Menu</nav>
  <main class="col-span-2 bg-red-500 p-4">Main</main>
  <aside class="bg-yellow-500 p-4">Sidebar</aside>
  <footer class="col-span-4 bg-gray-700 p-4">Footer</footer>
</div>