columns

با استفاده از ویژگی columns می توان محتوای یک عنصر را بصورت ستونی در کنار هم قرار داد. این ویژگی از نوع ویژگی های مختصرنویسی است که توسط آن می توان ویژگی های column-width و column-count را مقداردهی کرد.

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

با استفاده از ویژگی های column-width و column-count عرض و تعداد ستون ها را تعیین می کنیم. می توانیم برای هر دو ویژگی توسط ویژگی columns مقدار تعیین کنیم و اگر یکی از آنها را مقدار ندهیم، مقدار آن همان مقدار اولیه آن یا auto خواهد بود.

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

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

مقادیر ویژگی columns


columns: <'column-width'> ||  <'column-count'>

مقدار اولیه این ویژگی auto auto می باشد.

مثال های زیر نمونه هایی معتبر برای مقداردهی این ویژگی م باشند.


columns: 3; /* سه ستون که عرض آنها خودکرا توسط مرورگر بر اساس فضای موجود عنصر مشخص می شود */
columns: 300px 3; /* سه ستون که عرض آنها 300 پیکسل می باشد */
columns: 25%; /* عرض هر ستون 25 درصد فضای موجود عنصر خواهد بود و تعداد ستون ها نیز بر اساس همان فضا توسط مرورگر تعیین می شود */        

برای بررسی دو ویژگی گفته شده به مطالب مربوط به آنها مراجعه کنید.

مثال

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


.container { 
  width: 90%;
  columns: 300px 3;
}  

در دموی زیر با تغییر اندازه صفحه متوجه تغییرات عرض و تعداد ستون ها می شوید که مرورگر این کار را بر اساس تغییرات فضای موجود عنصر انجام می دهد:

 

See the Pen columns by Mojtaba Seyedi (@seyedi) on CodePen.


 

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

2 دیدگاه برای “columns

  1. سلام
    می خواستم بدونم با توجه به این که IE 8,9 این خصیصه رو پشتیبانی نمی کنن ، می شه ازش استفاده کرد ؟

    یعنی برنامه نویس ها در حال حاضر ازش استفاده می کنن ؟

    1. سلام. ببینید سایت شما نیازی نیست همه جا دقیقا یک شکل نمایش داده بشه. می تونید از یک سری ویژگی هایی که مرورگرهای مدرن در اختیارتون میزارند استفاده کنید در جهت بهبود تجربه کاربری برای کاربرهایی که از اون مرورگرها استفاده میکنن. حالا کسی که از مرورگرهای قدیمی استفاده میکنه چی؟ نکته مهم برای اون کاربر اینه که به محتوا برسه حالا اگر محتوا به جای اینکه توی سه تا ستون قرار داشت زیر هم توی یک ستون بود براش خیلی نباید فرق کنه.

      خوبی CSS همینه، این که اگر مرورگر یک چیزی رو نشناسه نادیده میگیره و ما بخوبی میتونیم از این قضیه استفاده کنیم.

      راه حل های دیگه ای هم مثل استفاده از polyfillها هستند که من توصیه نمی کنم.

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