در این بخش در مورد خواص ستون چندگانه در CSS3 صحبت خواهیم کرد. ویژگیهای زیر برخی از ویژگی هایی هستند که برای ایجاد ستون چندگانه در طراحی سایت استفاده می شود.
1. column-count : ویژگی column-count بیانگر تعداد ستون هایی است که یک عنصر می تواند به آنها تقسیم شود. در مثال زیر عنصر <div> به سه ستون تقسیم شده است.
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
2. column-gap : ویژگی column-gap، فاصله و شکاف بین ستون ها را مشخص می کند. نمونه زیر بیانگر 40 پیکسل فاصله بین ستون است.
div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
3. column-rule-style : ویژگی column-rule-style، تعیین کننده سبک قاعده بین ستون ها است.
div {
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
4. column-rule-width : این ویژگی بیانگر عرض قاعده بین ستون ها است.
div {
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
5. column-rule-color : ویژگی column-rule-color بیانگر رنگ قاعده بین ستون ها است.
div {
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
6. column-rule : این ویژگی در واقع در طراحی سایت ، یک ویژگی مختصر نویسی برای تنظیم تمام ویژگی های قاعده ستون که در بالا گفته شد است.
div {
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
7. column-span : از این ویژگی برای تعیین تعداد ستون هایی است که یک عنصر باید پوشش دهد. در مثال زیر مشخص شده است که <h2> باید تمام طول ستون ها را پوشش دهد.
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
8. column-width : این ویژگی عرض مطلوب برای ستون را در طراحی سایت پیشنهاد می کند. در نمونه زیر عرض مطلوب پیشنهاد شده برای ستون معادل 100 پیکسل است.
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}