CSS свойство column-fill

Свойство column-fill контролирует контент элемента, который распределен внутри колонок. Контент может быть распределен внутри колонок равномерно или последовательно. Свойство имеет две значения - balance и auto. "Balance" - значение по умолчанию, при котором контент равномерно распределяется в колонках. При значении "auto" контент занимает столько пространства, сколько ему потребуется.

Значение по умолчанию balance
Применяется К многоколоночным элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.columnFill = "balance";

Синтаксис

column-fill: auto | balance | balance-all |  initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .balance {
      column-count: 4;
      column-rule: 1px solid black;
      column-fill: balance;
      }
    </style>
  </head>
  <h2>Пример свойства column-fill</h2>
  <body>
    <p class="balance">
      Текст, распределенный внутри нескольких колонок. CSS свойство column-fill используется для распределения контента внутри колонок.
    </p>
  </body>
</html>

Значения

Значение Описание
auto Последовательно заполняет колонки.
balance Equally divides the content between columns. In paged media, only the last page is balanced.Равномерно распределяет контент внутри колонок. При печати это правило относится только к последней странице.
balance-all Равномерно распределяет контент внутри колонок. При печати это правило относится ко всем страницам.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
50.0 + 12.0 + 52.0
+ 13 -moz-
9.0+ 37.0+

Практикуйте свои знания

What does the CSS column-fill property do?
Считаете ли это полезным?