🔹 Break Inside چیه؟

کلاس‌های break-inside در Tailwind برای کنترل شکست ستون یا صفحه داخل یک عنصر استفاده میشن.

مثلاً وقتی چندتا کارت داری و نمی‌خوای نصفشون توی یک ستون باشن و نصف دیگه توی ستون بعدی.

🔹 کلاس‌های اصلی Break Inside

• break-inside-auto → رفتار پیش‌فرض مرورگر

• break-inside-avoid → جلوگیری از شکسته شدن عنصر

• break-inside-avoid-page → جلوگیری از شکست صفحه داخل عنصر

• break-inside-avoid-column → جلوگیری از شکست ستون داخل عنصر

🔹 مثال ساده (جلوگیری از شکست در ستون‌ها)

<div class="columns-2 gap-4">
  <div class="break-inside-avoid bg-blue-100 p-4">
    کارت ۱ - کامل توی یک ستون
  </div>
  <div class="break-inside-avoid bg-green-100 p-4">
    کارت ۲ - کامل توی یک ستون
  </div>
  <div class="break-inside-avoid bg-yellow-100 p-4">
    کارت ۳ - کامل توی یک ستون
  </div>
</div>

📌 بدون break-inside-avoid ممکنه کارت‌ها نصفه نصفه بین ستون‌ها بشکنن.

🔹 مثال در پرینت (Page Break)

<div class="p-4 bg-gray-100 break-inside-avoid-page">
  این بخش کامل توی یک صفحه پرینت میشه
</div>

📌 مفید برای PDF یا پرینت گرفتن گزارش‌ها.

🔹 استفاده ترکیبی با Columns

<div class="columns-3 gap-4">
  <div class="break-inside-avoid bg-pink-200 p-4">کارت A</div>
  <div class="break-inside-avoid bg-purple-200 p-4">کارت B</div>
  <div class="break-inside-avoid bg-orange-200 p-4">کارت C</div>
</div>

📌 همه کارت‌ها کامل و منظم توی ستون‌ها باقی می‌مونن.

🔹 نکته مهم

• break-inside خیلی پرکاربردتر از break-before و break-after ـه.

• مخصوصاً برای کارت‌ها، بلاگ‌ها و گالری‌ها عالیه.

• برای پرینت و PDF هم خیلی به درد می‌خوره تا بخشی نصفه نصفه نشه.