آموزش CSS – چیدمان چند ستونی در CSS3

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با نحوه ساخت انیمیشن در CSS3 آشنا شدید. در این بخش قصد داریم به چیدمان چند ستونی در CSS3 یپردازیم.

با CSS3 شما می توانید محتوای متنی یک المان را در چند ستون بچینید.

ساخت چیدمان چند ستونی در CSS3

CSS3 ماژولی برای چیدمان چند ستونه برای طرح بندی چند ستونی به ساده ترین و موثرترین راه را معرفی کرده است.

حالا شما می توانید چیدمان هایی مثل مجلات و روزنامه ها بدون استفاده از float و این موارد, بسازید.

این یک مثال برای جداکردن متن به سه ستون توسط قابلیت چیدمان چند ستونی در CSS3 است :

مشخص کردن تعداد یا عرض ستون

ویژگی column-count و column-width تعداد ستون ها را کنترل می کند.

خاصیت column-count تعداد ستون های داخل المان را مشخص می کند در حالی که column-width عرض ستون ها را مشخص می کند.

نکته: ویژگی column-width عرض بهینه ستون را تشریح می کند. به هرحال, عرض اصلی ستون ممکن است بر اساس فضای در دسترس عریض یا باریک تر باشد. این ویژگی نباید به همراه column-count استفاده شود.

مشخص کردن فاصله بین ستون

شما می توانید فاصله بین (gap) ستون ها را با ویژگی column-gap کنترل کنید. فاصله مشخص شده بین هر ستون اعمال می شود. مقدار پیش فرض آن مساپی با ۱em است.

مشخص کردن خط بین ستون ها

شما می توانید یک خط بین ستون ها را با ویژگی column-rule اضافه کنید.

این ویژگی یک دستور خلاصه نویسی برای عرض, استایل و رنگ خط است.

خصوصیت column-rule همان مقادیر مشابه border و outline را دریافت می کند.

نکته:  عرض خط ها تاثیری بر عرض باکس ستون ها ندارد اما اگر یک خط ستون عریض تر از فاصله بین باشد, باکس های ستون مجاور با خط هم پوشانی خواهند داشت.

خصوصیات چیدمان چند ستونی در CSS3

جدول زیر به شما مروری مختصر از همه ویژگی های چند ستونی را ارایه می دهد:

Property Description
column-count تعداد ستون ها داخل یک المان چند ستونه را مشخص می کند
column-fill مشخص می کند که محتوای یک چیدمان چند ستونه چگونه بین ستون ها توزیع شود.
column-gap فاصله بین ستون ها را مشخص می کند
column-rule یک خط افقی را بین ستون ها را رسم می کند که مقادیر عرض,رنگ و استایل را می گیرد
column-rule-color رنگ خط بین ستون ها را مشخص می کند
column-rule-style استایل خط بین ستون ها را مشخص می کند
column-rule-width عرض یا ضخامت خط بین ستون ها را مشخص می کند
column-span مشخص می کند عنصری که جزیی از محتوای ستون های یک چیدمان چندستونی است از حالت ستونی خارج شده و تمام ستون ها را بپوشاند یا نه.
column-width عرض بهینه ستون را مشخص می کند
columns یک دستور خلاصه نویسی برای تعریف column-width و column-countبصورت همزمان است

امیدوارم در این بخش آموزش CSS, از چیدمان چند ستونی در CSS3 نهایت استفاده را برده باشید.

در بخش بعدی با ویژگی Box-Sizing در CSS3 آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. توصیه من: هاست میهن وب‎هاست
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

دوره های آموزشی