آموزش چینش چند ستونی(multi-column) در CSS

ماژول چینش چند-ستونی در CSS به ما امکان می دهد تا مانند روزنامه ها، به سادگی چند ستون متنی را ایجاد کنیم:

ویژگی های مختلف چند-ستونی در CSS

در این فصل، درباره ی ویژگی های چند ستونی زیر نکاتی را خواهید آموخت:

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

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

ویژگی column-count در CSS، تعداد ستون هایی که یک عنصر باید به آن تقسیم شود را مشخص می کند. 

div {
  column-count: 3;
}

شکاف بین ستون ها در CSS

ویژگی column-gap در CSS، فضا یا شکاف بین ستون ها را مشخص می کند. 

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 در CSS، بعنوان یک ویژگی خلاصه شده برای تنظیم تمام ویژگی های column-rule-* در بالا، استفاده می شود. 

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

از ویژگی column-span برای مشخص کردن تعداد ستون هایی که یک عنصر(معمولا یک عنوان) اشغال می کند، استفاده می شود:

h2 {
  column-span: all;
  text-align: center;
}

عرض ستون در CSS

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

div {
  column-width: 100px;
}