column-fill

ویژگی column-fill تعیین می کند که محتوای یک چیدمان چندستونی است چگونه بین ستون ها توزیع شود.

به عنوان مثال فرض کنید چیدمان محتوای یک عنصر را بصورت سه ستون تنظیم می کنیم. حال آیا می خواهیم محتوا بصورت برابر بین ستون ها تقسیم شود یا اینکه ستون ها یکی یکی از محتوا پر شوند تا جایی که محتوا تمام شود. که در این صورت امکان دارد برخی از ستون ها خالی از محتوا باشند.

اگر بخواهیم محتوا بصورت برابر بین ستون ها تقسیم شود مرورگر تمام تلاش خود را می کند تا ارتفاع ستون ها تا حد امکان با هم برابر باشند.

مقادیر ویژگی column-fill

column-fill: auto | balance

balance

balance مقدار اولیه ویژگی column-fill می باشد و باعث می شود تا محتوا بصورت برابر و متعادل بین ستون ها توزیع شود.

مثال زیر را در نظر بگیرید:

.element {
  column-width: 12em;
  column-gap: 2em;
  /* column-fill: balance;  مقدار پیشفرض است و نیازی به نوشتن نیست */
}

auto

مقدار auto برای ویژگی column-fill باعث می شود تا محتوا از یک کنار یکی یکی داخل ستون ها قرار بگیرد تا جایی که محتوا تمام شود. که در این صورت امکان دارد محتوای ستون ها از نظر ارتفاع با هم برابر نباشند و یا اینکه ستون هایی بدون محتوا باقی بمانند.

.element {
  column-width: 12em;
  column-gap: 2em;
  column-fill: auto;
}

تصویر زیر تفاوت این دو مقدار را به نمایش می گذارد:

مثال

دموی زیر را بررسی کنید:

See the Pen column-fill by Mojtaba Seyedi (@seyedi) on CodePen.

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