آموزش 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

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

PropertyDescription
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 آشنا می شویم.

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

موفق باشید.

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

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

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link