ویژگی column-count به ما این امکان را می دهد تا محتوای یک عنصر را بصورت ستونی (روزنامه ای) در کنار هم بچینیم و این ویژگی تعداد ستون ها را مشخص می کند.
معمولا در مجله ها و روزنامه ها این روش نمایش محتوا دیده میشود که تصاویر و متن ها بصورت ستونی چاپ می شوند. در طراحی صفحات وب هم ما می توانیم دقیقا همین کار را توسط ماژول CSS Multi-column Layout انجام دهیم.
مقادیر ویژگی column-count
column-count: auto | <number>
<number>
تعیین تعداد ستون ها کار آسانی است به عنوان نمونه فرض کنید بصورت مستقیم یک متن نسبتا طولانی داخل عنصر <body> قرار داده ایم و می خواهیم این متون بصورت ستونی در سه ستون در کنار هم قرار بگیرند، کافی است بصورت زیر عمل کنیم:
body {
column-count: 3;
}
زمانی که تعداد دلخواه ستون ها را مشخص می کنیم مرورگر با توجه به فضای موجود عرض هر یک از ستون ها را مشخص می کند مگر اینکه به ستون ها توسط ویژگی column-width یک عرض مشخص داده باشیم.
اگر به هر دلیلی ویژگی column-width روی تعداد ستون ها تاثیر بگذارد توجه داشته باشید که همیشه عددی که به column-count داده شده است تعداد بیشینه ستون ها خواهد بود و تعداد ستون ها تحت هیچ شرایطی بیشتر از آن نخواهد شد.
مقداردهی همزمان دو ویژگی column-count و column-width برای یک عنصر همیشه منطقی نیست و بهتر است با مشخص کردن تعیین عرض ستون ها اجازه دهیم تا مرورگر بصورت خودکار با توجه به عرض و فضای موجود تعداد ستون ها را تعیین کند. این کار باعث انعطاف پذیری بیشتر چیدمان ما خواهد شد و در نتیجه طرح به سمت واکنشگرایی حرکت خواهد کرد.
auto
auto مقدار اولیه ویژگی column-count می باشد و باعث می شود تا مرورگر بر اساس فاکتورها و ویژگی های دیگری (مثلا column-width) تعداد ستون ها را تعیین کند.
مثال
فرض کنید قرار است محتوای عنصری بصورت دو ستونی نمایش داده شود و اگر عرض صفحه نمایش بیشتر از یک مقدار خاص بود تعداد ستون ها سه تا شود.
خواهیم داشت:
.element {
column-count: 2;
}
@media screen and (min-width: 48em) {
.element {
column-count: 3;
}
}
See the Pen column-count by Mojtaba Seyedi (@seyedi) on CodePen.
سلام ، خسته نباشید….
یه درخواستی داشتم مربوط به این مطلب نیست.
اینکه لطفا یه سایت دیگه بزنید مخصوص جاوا اسکریپت و جاوااسکریپت رو توش مثل همین سایت آموزش بدید.
آدرسش هم مثلا اینطوری باشه :
JavaScript-Tricks.Com
:D
ممنون میشیم
دقیقا…
منم موافقم :)
اره جون من یه همچین سایتی بزنید
کتاب
JavaScript: The Definitive Guide
Book by David Flanagan
راهنمای جامع و کاملی هست ولی خب زبان اصلی هست
استاد آموزش بدن بهتره مگرنه sololearn هم هست. ولی استاد خیلی کامل تر میگن.