نوشتن نظر کلیک کنید

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

Last Update: ۲۱ مهر ۱۴۰۳

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

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

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

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

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

ویژگی	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

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

div {
  column-count: 3;
}

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

div {
  column-gap: 40px;
}

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