column-count

Базовая поддержка Широко распространена

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2017 года.

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

Попробовать

Синтаксис

/* Keyword value */
column-count: auto;

/* <integer> value */
column-count: 3;

/* Global values */
column-count: inherit;
column-count: initial;
column-count: revert;
column-count: revert-layer;
column-count: unset;

Значения

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

Формальное определение

Начальное значение	`auto`
Применимо к	Блочные контейнеры, кроме оберток таблиц
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	целое число целое число

Формальный синтаксис

column-count = 
  auto             |
  <integer [1,∞]>

Примеры

Разбиение абзаца на три столбца

HTML

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

CSS

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

Результат

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

Спецификация
CSS Multi-column Layout Module Level 1 # cc

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`column-count`	501	1212	52 1.5–74 В версиях ниже 37 работа с `display: table-caption` элементами не была реализована.	3715	93	5018	52 4–79 В версиях ниже 37 работа с `display: table-caption` элементами не была реализована.	3714	92	5.01.0	504.4
`auto`	1	12	1.5	15	3	18	4	14	2	1.0	4.4

См. также

column-width, columns сокращенная запись
column-rule-color, column-rule-style, column-rule-width, column-rule сокращенная запись
Многоколоночный макет (Урок по макетам)
Основные понятия многоколоночного макета

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-count