column-count

CSS свойство column-count разбивает содержимое элемента на заданное число столбцов.

Синтаксис

/* Значение, заданное ключевым словом */
column-count: auto;

/* целое значение */
column-count: 3;

/* глобальные значения */
column-count: inherit;
column-count: initial;
column-count: unset;

Значения

auto
Количество столбцов определяется другими свойствами CSS, такими как column-width (en-US).
<integer>
Является строго положительным <integer>, описывающим идеальное число столбцов, в которые будет стекаться содержимое элемента.  Если column-width (en-US). также, не установлено в значение  -auto, оно указывает максимально допустимое число столбцов.

Formal syntax

<integer> | (en-US) auto

Пример

HTML

<p class="content-box">
  This is a bunch of text split into three columns
  using the CSS `column-count` property. The text
  is equally distributed over the columns.
</p>

CSS

.content-box {
  column-count: 3;
}

Result

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

Specification Status Comment
CSS Multi-column Layout Module
Определение 'column-count' в этой спецификации.
Рабочий черновик Первое определение.

Начальное значениеauto
Применяется кBlock containers except table wrapper boxes
Наследуетсянет
Обработка значениякак указано
Animation typeцелое число

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

BCD tables only load in the browser

Смотрите также