مقدمه

چیدمان‌هایی که محتوا در آن‌ها بین چند ستون جریان پیدا می‌کند (مانند مجله‌ها و روزنامه‌ها) اکنون به‌راحتی با استفاده از قابلیت CSS Multi-column Layout قابل پیاده‌سازی هستند. این ویژگی در کنار CSS Grid و Flexbox به شما اجازه می‌دهد تقریباً هر نوع چیدمانی را با کمترین کدنویسی ایجاد کنید.

در این مطلب با امکانات مختلف چیدمان چندستونه در CSS آشنا می‌شویم.

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

برای ساخت چیدمان چندستونه می‌توان از دو ویژگی اصلی استفاده کرد:

• column-count
• column-width

ویژگی column-count

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

.col {
  background: #fff9c4;
  padding: 1rem 2rem;
}

.col-3 {
  column-count: 3;
}

<article class="col col-3">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

در این مثال محتوا در ۳ ستون تقسیم می‌شود.

واکنش‌گرا کردن ستون‌ها

می‌توانید در اندازه‌های مختلف صفحه تعداد ستون‌ها را تغییر دهید:

@media (max-width: 600px) {
  .col-3 {
    column-count: 1;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .col-3 {
    column-count: 2;
  }
}

ویژگی column-width

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

.col-8rem {
  column-width: 8rem;
}

<article class="col col-8rem">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

مزیت مهم این روش این است که به‌صورت خودکار واکنش‌گرا (Responsive) است و نیازی به Media Query ندارد.

ویژگی خلاصه‌نویسی columns

ویژگی columns ترکیبی از column-count و column-width است.

.col-2-12rem {
  columns: 2 12rem;
}

در این مثال:

• تعداد ستون: ۲
• عرض پیشنهادی ستون: ۱۲rem

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

فاصله و خطوط بین ستون‌ها

ویژگی column-gap

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

.col-gap-5rem {
  column-gap: 5rem;
}

به‌صورت پیش‌فرض اکثر مرورگرها فاصله‌ای حدود 1rem در نظر می‌گیرند.

ویژگی column-rule

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

.col-fancy-rule {
  column-rule: 3px dotted hotpink;
}

ساختار آن مشابه ویژگی border است:

column-rule: width style color;

مثال:

column-rule: 2px solid gray;

گسترش عنصر روی تمام ستون‌ها

ویژگی column-span

گاهی لازم است یک عنصر مانند تیتر، تمام عرض ستون‌ها را اشغال کند.

.col h3 {
  column-span: all;
  border-bottom: 2px solid green;
}

<h3>عنوان مقاله</h3>

در این حالت تیتر روی تمام ستون‌ها نمایش داده می‌شود و ستون‌ها از زیر آن ادامه پیدا می‌کنند.

⚠️ مرورگر Firefox هنوز پشتیبانی کامل از column-span ندارد.

کنترل شکستن محتوا بین ستون‌ها

برای مدیریت نحوه تقسیم عناصر بین ستون‌ها می‌توان از ویژگی‌های زیر استفاده کرد:

• break-before
• break-after
• break-inside

جلوگیری از شکستن پاراگراف

.breaks p {
  break-inside: avoid-column;
}

در این حالت یک پاراگراف بین دو ستون تقسیم نمی‌شود.

مقدارهای رایج:

break-inside: avoid;
break-inside: avoid-column;

نحوه توزیع محتوا بین ستون‌ها

ویژگی column-fill

مشخص می‌کند محتوا چگونه بین ستون‌ها پخش شود.

مقدار پیش‌فرض: balance

column-fill: balance;

محتوا به‌صورت متعادل بین ستون‌ها توزیع می‌شود.

مقدار auto

column-fill: auto;

در این حالت ستون اول تا حد امکان پر می‌شود و سپس محتوا به ستون بعدی منتقل می‌شود.

مزایای Multi-Column Layout

✅ ایجاد چیدمان مشابه روزنامه و مجله

✅ کدنویسی ساده و کم‌حجم

✅ واکنش‌گرایی آسان

✅ مناسب برای مقالات طولانی

✅ سازگاری بالا با مرورگرهای مدرن

پشتیبانی مرورگرها

طبق آمار سال ۲۰۲۰ و پس از آن، بیش از ۹۹٪ مرورگرهای دنیا از قابلیت‌های اصلی Multi-Column Layout پشتیبانی می‌کنند.

برخی مرورگرها ممکن است از ویژگی‌های پیشرفته‌تری مانند:

break-inside: avoid-column;

پشتیبانی کامل نداشته باشند، اما قابلیت‌های اصلی تقریباً در همه مرورگرهای مدرن در دسترس هستند.

نتیجه‌گیری

قابلیت Multi-Column Layout یکی از ابزارهای قدرتمند CSS مدرن است که در کنار Grid و Flexbox امکان ساخت چیدمان‌های منعطف و حرفه‌ای را فراهم می‌کند. با استفاده از ویژگی‌هایی مانند column-count، column-width، column-gap، column-rule و column-span می‌توانید تنها با چند خط CSS، محتوا را در قالب ستون‌های زیبا و خوانا نمایش دهید.

از همراهی شما با پارمین کلود سپاسگزاریم.