آموزش کار با ستون ها یا Columns در CSS3

مقدمه

ستون‌ها (Columns) در CSS3 به شما امکان می‌دهند محتوای طولانی را به چند ستون تقسیم کنید تا خوانایی و طراحی صفحه بهبود یابد. با استفاده از ویژگی‌های CSS می‌توان تعداد ستون‌ها، فاصله بین آن‌ها و قوانین تقسیم‌بندی را کنترل کرد. برای یادگیری کامل CSS3 و استفاده حرفه‌ای از ستون‌ها، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی ستون‌ها در CSS3

CSS3 قابلیت چندستونه با استفاده از ویژگی‌های column-count و column-gap را فراهم می‌کند. این ویژگی‌ها باعث می‌شوند متن یا محتوا به صورت چندستونه مرتب شود و طراحی حرفه‌ای ایجاد گردد.

تعیین تعداد ستون‌ها با column-count
کنترل فاصله بین ستون‌ها با column-gap
کنترل قوانین تقسیم محتوا با column-rule
ایجاد افکت‌های زیبا و واکنش‌گرا با media query

مثال عملی با کد

متن به دو ستون تقسیم شده:

.multi-column {
  column-count: 2;
  column-gap: 20px;
}

استفاده از column-rule برای خط بین ستون‌ها:

.multi-column {
  column-count: 3;
  column-gap: 15px;
  column-rule: 2px solid #3498db;
}

ستون‌ها واکنش‌گرا با media query:

@media (max-width: 768px) {
  .multi-column {
    column-count: 1;
  }
}

نکات مهم و توضیحات تکمیلی

column-count تعداد ستون‌ها را مشخص می‌کند.
column-gap فاصله بین ستون‌ها را تنظیم می‌کند.
column-rule برای افزودن خط جداکننده بین ستون‌ها کاربرد دارد.
ستون‌ها را می‌توان با media query واکنش‌گرا کرد تا در موبایل به صورت تک‌ستونه نمایش داده شوند.