چیدمان چند ستون CSS

طرح بندی چند ستون CSS اجازه می دهد تا تعریف آسان از چند ستون متن - درست مثل روزنامه ها  ایحاد شود.

پشتیبانی مرورگرها

اعداد در جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از این ویژگی پشتیبانی می کند.
اعداد که به دنبال آن -webkit- یا -moz- اولین نسخه که با یک پیشوند کار کرد را مشخص کنید.

ویژگی

column-count

50.0
4.0 -webkit-

10.0

52.0
2.0 -moz-

9.0
3.1 -webkit-

37.0
15.0 -webkit-
11.1

column-gap

50.0
4.0 -webkit-

10.0

52.0
2.0 -moz-

9.0
3.1 -webkit-

37.0
15.0 -webkit-
11.1

column-rule

50.0
4.0 -webkit-

10.0

52.0
2.0 -moz-

9.0
3.1 -webkit-

37.0
15.0 -webkit-
11.1

column-rule-color

50.0
4.0 -webkit-

10.0

52.0
2.0 -moz-

9.0
3.1 -webkit-

37.0
15.0 -webkit
11.1

column-rule-style

50.0
4.0 -webkit-

10.0

52.0
2.0 -moz-

9.0
3.1 -webkit-

37.0
15.0 -webkit
11.1

column-rule-width

50.0
4.0 -webkit-

10.0

52.0
2.0 -moz-

9.0
3.1 -webkit-

37.0
15.0 -webkit
11.1

column-span

50.0
4.0 -webkit-

10.0

Not supported

9.0
3.1 -webkit-

37.0
15.0 -webkit
11.1

column-width

50.0
4.0 -webkit-

10.0

52.0
2.0 -moz-

9.0
3.1 -webkit-

37.0
15.0 -webkit
11.1

خاصیت چند ستون در CSS

در این فصل در مورد خواص چند ستون یاد خواهید گرفت:

• column-count
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule
• column-span
• column-width

ایجاد چند ستون در CSS

ویژگی column-count تعداد ستون ها را مشخص می کند و عنصر باید به آن تقسیم شود.
مثال زیر متن را در عنصر <div> به 3 ستون تقسیم می کند:

div {
    column-count: 3;
}

تعیین فاصله بین ستون ها در CSS

ویژگی column-gap فاصله بین ستون را مشخص می کند.
مثال زیر یک فاصله 40 پیکسل بین ستون ها را مشخصمی کند:

div {
    column-gap: 40px;
}

خطوط بین ستون CSS

ویژگی  column-rule-style  سبک بین ستون را مشخص می کند:

div {
    column-rule-style: solid;
}

ویژگی  column-rule-width عرض پهنای بین ستون را مشخص می کند:

div {
    column-rule-width: 1px;
}

ویژگی  column-rule-color رنگ خطوط بین ستون را مشخص می کند:

div {
    column-rule-color: lightblue;
}

ویژگی  column-rule یک ویژگی مختصر برای تنظیم تمام خواص column-rule-*  است.مثال زیر عرض، سبک و رنگ قاعده بین ستون را تعیین می کند:

div {
    column-rule: 1px solid lightblue;
}

مشخص کنید که چند ستون درعنصری باید قرار داشته باشد

ویژگی  column-span مشخص می کند که چند ستون عنصر باید در آن قرار داشته باشد.
مثال زیر مشخص می کند که عنصر <h2> باید در تمام ستون ها قرار گیرد:

h2 {
    column-span: all;
}

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

ویژگی  column-width یک عرض پیشنهاد شده برای عرض ستون را مشخص می کند.
مثال زیر مشخص می کند که عرض پیشنهاد شده برای ستون ها باید 100px باشد:

div {
    column-width: 100px;
}