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;
}

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

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