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

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

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

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

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

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

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

p {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
       -moz-column-count: 3; /* Firefox */
            column-count: 3; /* Standard syntax */
}

p {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3; /* Standard syntax */

}

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

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

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

p {
    -webkit-column-width: 150px; /* Chrome, Safari, Opera */
       -moz-column-width: 150px; /* Firefox */
            column-width: 150px; /* Standard syntax */
}

p {

-webkit-column-width: 150px; /* Chrome, Safari, Opera */

-moz-column-width: 150px; /* Firefox */

column-width: 150px; /* Standard syntax */

}

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

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

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

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    /* Standard syntax */
    column-count: 3;
    column-gap: 100px;
}

p {

/* Chrome, Safari, Opera */

-webkit-column-count: 3;

-webkit-column-gap: 100px;

/* Firefox */

-moz-column-count: 3;

-moz-column-gap: 100px;

/* Standard syntax */

column-count: 3;

column-gap: 100px;

}

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

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

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

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

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule: 2px solid red;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    -moz-column-rule: 2px solid red;
    /* Standard syntax */
    column-count: 3;
    column-gap: 100px;
    column-rule: 2px solid red;
}

p {

/* Chrome, Safari, Opera */

-webkit-column-count: 3;

-webkit-column-gap: 100px;

-webkit-column-rule: 2px solid red;

/* Firefox */

-moz-column-count: 3;

-moz-column-gap: 100px;

-moz-column-rule: 2px solid red;

/* Standard syntax */

column-count: 3;

column-gap: 100px;

column-rule: 2px solid red;

}

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

خصوصیات چیدمان چند ستونی در 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`بصورت همزمان است