column-width

ویژگی column-width به ما این امکان را می دهد تا محتوای یک عنصر را بصورت ستونی (روزنامه ای) در کنار هم بچینیم. این ویژگی عرض آن ستون ها را تعیین می کند که مرورگر توسط آن تعدادی ستون را در کنار هم بوجود می آورد.

معمولا در مجله ها و روزنامه ها این روش نمایش محتوا دیده میشود که تصاویر و متن ها بصورت ستونی چاپ می شوند. در طراحی صفحات وب هم ما می توانیم دقیقا همین کار را توسط ماژول CSS Multi-column Layout انجام دهیم.

تعداد دقیق ستون ها بستگی به فضای موجود برای عنصر دارد و همچنین می توان تعداد ستون ها را بصورت مشخص توسط ویژگی column-count تعیین کرد.

مقداردهی همزمان دو ویژگی column-count و column-width برای یک عنصر همیشه منطقی نیست و بهتر است با مشخص کردن تعیین عرض ستون ها اجازه دهیم تا مرورگر بصورت خودکار با توجه به عرض و فضای موجود تعداد ستون ها را تعیین کند. این کار باعث انعطاف پذیری بیشتر چیدمان ما خواهد شد و در نتیجه طرح به سمت واکنشگرایی حرکت خواهد کرد.

مقادیر ویژگی column-width


column-width: auto | <length>

<length>

می توان به این ویژگی با واحدهای مختلف طولی مقدار داد و عرض ستون ها را مشخص کرد. به عنوان مثال فرض کنید عرض ستون ها را برابر با 12em قرار دهیم:


.example {
  column-width: 12em;
}  

این بدین معنی است که عرض ستون ها حداقل 12em خواهد بود، همچنین با توجه به فضای موجود می توانند بیشتر از 12em باشند. و در آخر اگر فضای موجود کمتر از 12em باشد یک ستون خواهیم داشت که کل فضای موجود را در بر خواهد گرفت.

زمانی که تعداد دلخواه ستون ها را مشخص می کنیم مرورگر با توجه به فضای موجود، عرض هر یک از ستون ها را مشخص می کند مگر اینکه به ستون ها توسط ویژگی column-width یک عرض مشخص داده باشیم.

اگر به هر دلیلی ویژگی column-width روی تعداد ستون ها تاثیر بگذارد توجه داشته باشید که همیشه عددی که به column-count داده شده است تعداد بیشینه ستون ها خواهد بود و تعداد ستون ها تحت هیچ شرایطی بیشتر از آن نخواهد شد.

auto

auto مقدار اولیه ویژگی column-width می باشد و باعث می شود تا مرورگر بر اساس فاکتورها و ویژگی های دیگری (مثلا column-count البته اگر مقداری غیر از auto داشته باشد) عرض ستون ها را تعیین کند.

مثال

مثال زیر را در نظر بگیرد که عنصری با عرض 200 پیکسل داریم، حال عرض ستون ها را برابر با 90 پیکسل قرار می دهیم:


div {
  width: 200px;
  column-width: 90px;
  column-gap: 0;
  column-rule: none;
}   

از آنجا عرض جمع دو ستون 90 پیکسلی برابر با 180 است و در نهایت 20 پیکسل فضا باقی خواهد ماند ستون ها هر کدام 10 پیکسل فضای بیشتری می گیرند.

در سوی دیگر مثال زیر را داریم که عنصر ما 100 پیکسل است و عرض ستون ها را برابر با 120 پیکسل قرار می دهیم:


div {
  width: 100px;
  column-width: 120px;
  column-gap: 0;
  column-rule: none;
}   

در دموی زیر عرض عنصر برابر با 90 درصد فضای موجود می باشد و عرض تعداد ستون ها را توسط ویژگی column-width برابر با 200 پیکسل قرار داده ایم. با کوچک بزرگ کردن صفحه و تغییر فضای موجود برای عنصر تغییرات عرض و تعداد ستون ها را بر اساس شرایط مختلف مشاهده کنید:

 

See the Pen column-width by Mojtaba Seyedi (@seyedi) on CodePen.


 

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *