column-count

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

Синтаксис

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

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

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

Значения

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

Formal syntax

<integer> | 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целое число
Канонический порядокper grammar

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
column-countChrome Полная поддержка 50
Полная поддержка 50
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 52
Полная поддержка 52
Полная поддержка 1.5
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Prior to version 37, multiple columns didn't work with display: table-caption elements.
IE Полная поддержка 10Opera Полная поддержка 11.1
Полная поддержка 11.1
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 50
Полная поддержка 50
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 50
Полная поддержка 50
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 52
Полная поддержка 52
Полная поддержка 4
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Prior to version 37, multiple columns didn't work with display: table-caption elements.
Opera Android Полная поддержка 11.1
Полная поддержка 11.1
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 5.0
Полная поддержка 5.0
Полная поддержка 1.0
С префиксом
С префиксом Требует вендорный префикс: -webkit-

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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