🔹 Columns چیه؟

کلاس‌های columns توی Tailwind برای ایجاد طرح‌بندی چندستونه (CSS Multi-Column Layout) استفاده میشه.
خیلی سریع می‌تونی متن یا المان‌ها رو توی چند ستون تقسیم کنی، بدون نیاز به flex یا grid.

🔹 استفاده ساده

<div class="columns-2 gap-4">
  <p>ستون اول</p>
  <p>ستون دوم</p>
  <p>ستون سوم (میره زیر)</p>
</div>

📌 توضیح:

• columns-2 → تقسیم محتوا به ۲ ستون

• gap-4 → فاصله بین ستون‌ها

🔹 اندازه ستون‌ها

می‌تونی تعداد ستون‌ها یا حداقل عرض ستون رو مشخص کنی:

<div class="columns-3">
  <p>3 ستون</p>
  <p>...</p>
</div>

<div class="columns-sm">
  <p>ستون‌ها حداقل 14rem باشن</p>
</div>

🔹 کلاس‌های آماده برای ستون‌ها

• columns-1 → یک ستون

• columns-2 → دو ستون

• columns-3 → سه ستون

• columns-4 → چهار ستون

• columns-5 → پنج ستون

• columns-6 → شش ستون

• columns-auto → مرورگر خودش تعداد ستون رو تعیین کنه

• columns-[value] → مقدار دلخواه (مثلا columns-[250px])

🔹 Breakpoints و ریسپانسیو

📌 می‌تونی برای هر سایز صفحه تعداد ستون مشخص کنی:

<div class="columns-1 md:columns-2 lg:columns-3">
  <p>محتوا</p>
  <p>محتوا</p>
  <p>محتوا</p>
  <p>محتوا</p>
</div>

• توی موبایل → 1 ستون

• توی تبلت → 2 ستون

• توی دسکتاپ → 3 ستون

🔹 جلوگیری از شکست عنصر بین ستون‌ها

گاهی می‌خوای یه المان کامل توی یه ستون بمونه و نصفه نصفه نشه.
از break-inside-avoid استفاده کن:

<div class="columns-2 gap-4">
  <div class="break-inside-avoid bg-blue-100 p-2">کارت 1</div>
  <div class="break-inside-avoid bg-green-100 p-2">کارت 2</div>
  <div class="break-inside-avoid bg-red-100 p-2">کارت 3</div>
</div>

🔹 نکته مهم

• Columns ساده‌تر از Grid هستن، ولی کنترل کمتری هم دارن.

• برای متن‌های طولانی یا لیست‌ها خیلی خوبن.

• برای طراحی کارت‌ها بهتره همراه با break-inside-avoid استفاده بشه.