1) تعداد ستون‌های مساوی

برای ساخت ستون‌های مساوی از کلاس‌های grid-cols-n استفاده می‌کنیم:

<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 = سه ستون مساوی
🔹 Tailwind تا grid-cols-12 رو به صورت پیش‌فرض داره.

2) استفاده از Fraction Units (fr)

fr به معنی نسبت تقسیم‌بندی هست.
مثلاً اگر بگی grid-cols-3، در واقع مساوی با grid-template-columns: repeat(3, minmax(0, 1fr)); هست.

3) عرض خودکار (auto)

اگر بخوای ستون‌ها عرض محتوا رو بگیرن:

<div class="grid grid-cols-[auto_auto_1fr] gap-4">
  <div class="bg-coral p-4">A</div>
  <div class="bg-coral p-4">B</div>
  <div class="bg-coral p-4">C</div>
</div>

🔹 اینجا با کلاس Arbitrary Values گفتیم:

• ستون اول → auto

• ستون دوم → auto

• ستون سوم → 1fr (پر کردن بقیه فضا)

4) اندازه ثابت ستون‌ها

با استفاده از [] می‌تونی اندازه دقیق ستون‌ها رو تعریف کنی:

<div class="grid grid-cols-[100px_200px_auto] gap-4">
  <div class="bg-coral">100px</div>
  <div class="bg-coral">200px</div>
  <div class="bg-coral">auto</div>
</div>

5) ترکیب minmax()

اگر بخوای ستون‌ها حداقل و حداکثر اندازه داشته باشن:

<div class="grid grid-cols-[minmax(150px,_1fr)_2fr] gap-4">
  <div class="bg-coral">Min 150px, max 1fr</div>
  <div class="bg-coral">2fr</div>
</div>

6) تکرار ستون‌ها (repeat)

می‌شه از repeat() استفاده کرد:

<div class="grid grid-cols-[repeat(4,_1fr)] gap-4">
  <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>

✅ خلاصه:

• grid-cols-n → ستون‌های مساوی

• grid-cols-[size1_size2_size3] → ستون‌های سفارشی

• minmax() و repeat() → برای طراحی ریسپانسیو و حرفه‌ای