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

طرح چند ستونی CSS امکان تعریف آسان چندین ستون از متن را فراهم می کند – درست مانند روزنامه ها:


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

طرح چند ستونی CSS امکان تعریف آسان چندین ستون از متن را فراهم می کند – درست مانند روزنامه ها:


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ویژگی یک ویژگی مختصر برای تنظیم تمام ویژگی های ستون-قانون- * در بالا است.

مثال زیر عرض ، سبک و رنگ قانون را بین ستون ها تنظیم می کند:

مثال

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

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

این column-spanویژگی مشخص می کند که یک ستون باید چند ستون در طول آن قرار بگیرد.

مثال زیر مشخص می کند که عنصر <h2> باید در تمام ستون ها قرار داشته باشد:

مثال

h2 {
  column-span: all;
}

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

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

مثال زیر مشخص می کند که عرض پیشنهادی و مطلوب برای ستون ها باید 100 پیکسل باشد:

مثال

div {
  column-width: 100px;
}

منبع