column-fill

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Свойство 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         |
  balance      |
  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

Совместимость с браузерами