ویژگی columns در CSS

columns Property

ویژگی کوتاه نویسی columns در CSS، عرض و تعداد ستون های محتوای عنصر را مشخص می کند.

نحوه نوشتار

columns: 18em;
columns: auto;
columns: 2;
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

نکته: در این ویژگی اندازه عرض ستون به عنوان حداقل عرض هر ستون و تعداد ستونها به عنوان حداکثر تعداد آنها در نظر گرفته میشود. در این حالت، زمانی که عرض مرورگر کمتر شود تعداد ستون ها بطور خودکار یکی یکی کمتر می شود تا به یک ستون کاهش یابد.

در مثال زیر نحوه عملکرد این ویژگی را می بینیم:

html

<div class="pg1">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</div>
<hr />
<div class="pg2">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</div>
<hr />
<div class="pg3">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</div>

css

body {
   direction: rtl;
   font-family: "Segoe UI";
}
div {
    padding: 15px;
    margin-top: 20px;
}
.pg1 {
    columns: 2 70px;
}
.pg2 {
    columns: 4 150px;
}
.pg3 {
    columns: 3 250px;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.