`column-count` CSS-свойство

Базовый уровень Широко доступно

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

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

Попробуйте

column-count: 2;

column-count: 3;

column-count: 4;

column-count: auto;
column-width: 8rem;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

#example-element {
  width: 100%;
  text-align: left;
}

Синтаксис

/* 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, оно лишь указывает максимально допустимое количество столбцов.

Описание

Значение column-count большее, чем 1, создаёт многоколоночный макет. Содержимое элемента будет равномерно распределено между указанным количеством столбцов.

Свойство column-count, а также свойства column-height и column-width можно также задать с помощью сокращённого свойства columns.

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

Начальное значение	auto
Применяется к	Блочные контейнеры, за исключением контейнеров табличных обёрток
Наследуется	нет
Вычисленное значение	как задано
Тип анимации	an <a href="/en-US/docs/Web/CSS/Reference/Values/integer#interpolation" title="Значения CSS-типа данных <integer> интерполируются дискретными целочисленными шагами. Расчёт выполняется так, как если бы они были действительными числами с плавающей точкой, а дискретное значение определяется с помощью функции floor.">integer</a>

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

column-count = 
  <integer> |
  auto

<integer> = 
  <number-token>

Примеры

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

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, уровень 1 # cc

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`column-count`	50 1	12 12	52 1.5–74 До версии 37 многоколоночная компоновка не работала с элементами `display: table-caption`.	37 15	9 3	50 18	52 4–79 До версии 37 многоколоночная компоновка не работала с элементами `display: table-caption`.	37 14	9 2	5.0 1.0	50 4.4	9 2
`auto`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2

См. также

column-height
column-width
Сокращённое свойство columns
column-rule-color, column-rule-style, column-rule-width, сокращённое свойство column-rule
Изучение: многоколоночная компоновка (Изучение компоновки)
Основные понятия многоколоночной компоновки

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