ستون‌های متعدد (Multiple Columns)

چیدمان چندستونه

CSS Multi-column اجازه می‌دهد متن را مثل روزنامه و مجله در چند ستون تقسیم کنید.

ویژگی‌های اصلی

.article {
        column-count: 3;
        column-gap: 30px;
        column-rule: 1px solid #ddd;
    }

column-width (ریسپانسیو)

.article {
        column-width: 250px;  /* مرورگر ستون‌ها را خودکار می‌سازد */
    }

span بین ستون‌ها

.article h2 {
        column-span: all;  /* عنوان تمام ستون‌ها را می‌گیرد */
    }

break داخل ستون

.avoid-break {
        break-inside: avoid;  /* از شکستن در ستون جلوگیری کن */
    }

بهترین شیوه‌ها

• برای متن‌های طولانی، چیدمان چندستونه خوانایی را بالا می‌برد
• column-width به‌جای column-count برای ریسپانسیو
• break-inside: avoid برای عناصر داخل ستون

نکات مهم

• چیدمان چندستونه برای متن است، نه برای چیدمان کلی صفحه
• برای چیدمان کلی از Grid یا Flexbox استفاده کنید