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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
column-fill
auto
balance

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.