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.

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