column-fill

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

Начальное значениеbalance
Применяется кмультиколоночные элементы
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

Синтаксис

css

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

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

Значения

auto

Высота столбцов не контролируется.

balance

Разделяет содержимое на равные по высоте столбцы.

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

column-fill = 
  auto         | (en-US)
  balance      | (en-US)
  balance-all

Примеры

css

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

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

Specification
CSS Multi-column Layout Module Level 1
# cf

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

BCD tables only load in the browser