CSS – ستون‌های چندگانه (Multiple Columns)

طرح چند ستونه در CSS به شما این امکان را می‌دهد که به راحتی چند ستون از متن تعریف کنید، دقیقاً مثل چیزی که در روزنامه‌ها مشاهده می‌شود:

<div class="newspaper">
  <h2>Daily Ping</h2>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

ویژگی‌های چند ستونه در CSS

در این فصل، با ویژگی‌های زیر برای ایجاد چند ستون آشنا خواهید شد:

  • column-count: تعداد ستون‌ها
  • column-gap: فاصله بین ستون‌ها
  • column-rule-style: استایل خط بین ستون‌ها
  • column-rule-width: عرض خط بین ستون‌ها
  • column-rule-color: رنگ خط بین ستون‌ها
  • column-rule: خلاصه‌ای از تنظیمات خط بین ستون‌ها
  • column-span: تعداد ستون‌هایی که یک عنصر باید در بر بگیرد
  • column-width: عرض پیشنهادی برای ستون‌ها

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

ویژگی‌های چند ستونه توسط مرورگرهای اصلی پشتیبانی می‌شوند. در جدول زیر، نسخه مرورگرهایی که اولین بار از این ویژگی‌ها پشتیبانی کردند، آورده شده است:

ویژگی Chrome Firefox Safari Edge Opera
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0

ایجاد چند ستون در CSS

ویژگی column-count تعداد ستون‌هایی که باید عنصر به آن‌ها تقسیم شود را مشخص می‌کند. در مثال زیر متن داخل یک عنصر <div> به ۳ ستون تقسیم می‌شود:

div {
  column-count: 3;
}

تنظیم فاصله بین ستون‌ها

ویژگی column-gap فاصله بین ستون‌ها را تعیین می‌کند. مثال زیر فاصله 40 پیکسل بین ستون‌ها را مشخص می‌کند:

div {
  column-gap: 40px;
}

تنظیم خط بین ستون‌ها

  • column-rule-style: استایل خط بین ستون‌ها را تعیین می‌کند.
  • column-rule-width: عرض خط بین ستون‌ها را تنظیم می‌کند.
  • column-rule-color: رنگ خط بین ستون‌ها را مشخص می‌کند.
div {
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: lightblue;
}

یا می‌توانید از ویژگی ترکیبی column-rule برای تنظیم همه این ویژگی‌ها با هم استفاده کنید:

div {
  column-rule: 1px solid lightblue;
}

تنظیم تعداد ستون‌هایی که یک عنصر باید بپوشاند

ویژگی column-span مشخص می‌کند که یک عنصر چند ستون را بپوشاند. مثال زیر مشخص می‌کند که عنصر <h2> باید تمام ستون‌ها را بپوشاند:

h2 {
  column-span: all;
}

تنظیم عرض ستون‌ها

ویژگی column-width عرض پیشنهادی برای ستون‌ها را تعیین می‌کند. مثال زیر عرض 100 پیکسل را برای ستون‌ها پیشنهاد می‌کند:

div {
  column-width: 100px;
}

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.