column-fill

Свойство column-fill применяется к родительскому элементу, разбитому на столбцы и указывает как содержимое располагается внутри столбца (column). Если значение свойства column-fill установлено как balanced, то содержимое во всех столбцах будет иметь одинаковую высоту. В случае использования значения auto, содержимое занимает столько прострванства сколько ему потребуется.

Начальное значение	`balance`
Применяется к	мультиколоночные элементы
Наследуется	нет
Отображение	`visual`, но в сплошной среде, не имеет никакого эффекта при переполнении колонок
Обработка значения	как указано
Animation type	discrete
Канонический порядок	per grammar

Синтаксис

column-fill: auto;
column-fill: balance;

/* Значения по умолчанию */
column-fill: inherit;
column-fill: initial;
column-fill: unset;

Значения

auto: Высота столбцов не контролируется.
balance: Разделяет содержимое на равные по высоте столбцы.

Возможные значения

auto | balance | balance-all

Примеры

.content-box {
  column-count: 4;
  column-rule: 1px solid black;
  column-fill: balance;
  height: 200px;
}

Спецификации

Спецификация	Статус	Комментарий
CSS Multi-column Layout Module Определение 'column-fill' в этой спецификации.	Рабочий черновик	Значение по умолчанию

Поддержка браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Настольные
Мобильные

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Да)	13.0 (13.0)-moz	?	?	?

Feature	Android	Android Webview	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	(Да)	13.0 (13.0)-moz	?	?	?	(Да)