آموزش طرح های چند ستونه در CSS3 به زبان ساده با مثال کاربردی

با CSS3 می توانید محتوای متنی یک عنصر را در چند ستون تقسیم کنید.

ایجاد طرح های چند ستونه

CSS3 اجزای طرح بندی چند ستونه را برای ایجاد چند لایه ستون با روشی آسان و کارآمد معرفی کرده است. اکنون می توانید بدون استفاده از جعبه های شناور، طرح هایی مانند آنچه در مجلات و روزنامه ها می بینید، ایجاد کنید. در اینجا یک مثال ساده از تقسیم متن در سه ستون با استفاده از ویژگی طرح چند ستونه در CSS3 ارائه شده است.

مثال

p {
-webkit-column-count: 3; /* کروم، سافاری، اپرا */
-moz-column-count: 3; /* فایرفاکس */
column-count: 3; /* ساختار استاندارد */
}

تنظیم تعداد ستون یا عرض

ویژگی هایcolumn-count  وcolumn-width  در CSS کنترل می کنند که آیا و چند ستون نمایش داده شود. ویژگی column-count تعداد ستون ها را در داخل عنصر چند ستونه تنظیم می کند، در حالی که ویژگی column-width ، عرض مورد نظر را برای ستون ها تعیین می کند.

مثال

p {
-webkit-column-width: 150px; /* کروم، سافاری، اپرا */
-moz-column-width: 150px; /* فایرفاکس */
column-width: 150px; /* ساختار استاندارد */
}

توجه: ویژگی column-width، عرض بهینه ستون را تعیین می کند. اگرچه، ممکن است با توجه به فضای موجود، عرض ستون پهن تر یا باریک تر باشد. این ویژگی نباید با ویژگیcolumn-count  استفاده شود.

تنظیم فاصله بین ستون

با استفاده از ویژگی column-gap، می توانید فاصله بین ستون ها را کنترل کنید. بین هر ستون فاصله یکسانی اعمال می شود. فاصله پیش فرض طبیعی معادل em1 است.

مثال

p {
/* کروم، سافاری، اپرا */
-webkit-column-count: 3;
-webkit-column-gap: 100px;
/* فایرفاکس */
-moz-column-count: 3;
-moz-column-gap: 100px;
/* ساختار استاندارد */
column-count: 3;
column-gap: 100px;
}

تنظیم قوانین ستون

همچنین می توان با استفاده از ویژگی column-rule، بین ستون ها خط اضافه کنید. یک ویژگی کوتاه شده برای تنظیم عرض، سبک و رنگ خط در یک اعلان واحد است. ویژگی column-rule همان مقادیر حاشیه و خط بیرونی را می گیرد.

مثال

p {
/* کروم، سافاری، اپرا */
-webkit-column-count: 3;
-webkit-column-gap: 100px;
-webkit-column-rule: 2px solid red;
/* فایرفاکس */
-moz-column-count: 3;
-moz-column-gap: 100px;
-moz-column-rule: 2px solid red;
/* ساختار استاندارد */
column-count: 3;
column-gap: 100px;
column-rule: 2px solid red;
}

توجه: عرض تعیین شده در ویژگی column-rule روی عرض جعبه های ستون تاثیری ندارد، اما اگر عرض در این ویژگی از فاصله بین ستونی بزرگتر شود، جعبه های ستون مجاور با یکدیگر تداخل پیدا می کنند.

ویژگی های ستون های چندگانه در CSS3

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