گاهی می‌خواهیم متن یا محتوای طولانی در چند ستون نمایش داده شود، شبیه روزنامه یا مجلات. CSS ویژگی‌هایی برای این کار فراهم کرده است.

🔹 1. خاصیت column-count

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

.multicolumn {
  column-count: 3; /* متن را در 3 ستون تقسیم می‌کند */
}

<div class="multicolumn">
  این یک متن تستی است که در چند ستون نمایش داده خواهد شد. 
  این ویژگی برای نمایش مقالات، متن‌های طولانی یا طراحی شبیه روزنامه بسیار کاربرد دارد.
</div>

🔹 2. خاصیت column-gap

فاصله بین ستون‌ها را مشخص می‌کند.

.multicolumn {
  column-count: 3;
  column-gap: 40px; /* فاصله بین ستون‌ها */
}

🔹 3. خاصیت column-rule

یک خط بین ستون‌ها رسم می‌کند (مثل border).

.multicolumn {
  column-count: 3;
  column-gap: 30px;
  column-rule: 2px solid #999; /* خط جداکننده بین ستون‌ها */
}

🔹 4. خاصیت column-width

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

.multicolumn {
  column-width: 200px; /* هر ستون حداقل 200px باشد */
}

🔹 5. جلوگیری از شکستن یک بخش در ستون‌ها

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

.card {
  break-inside: avoid;
}

✅ مثال کامل:

<div class="multicolumn">
  <p>ستون اول - متن تستی...</p>
  <p>ستون دوم - متن تستی...</p>
  <p>ستون سوم - متن تستی...</p>
</div>

.multicolumn {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid coral;
}
.multicolumn p {
  break-inside: avoid;
}

📌 نتیجه: متن به ۳ ستون تقسیم می‌شود، با فاصله مشخص و خط جداکننده زیبا.