Столбцы

Базовая линия Широко доступно

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

Свойство columns CSS задаёт количество столбцов для вывода содержимого элемента, а также ширину этих столбцов.

Попробуйте

Составные свойства

Это свойство является сокращением следующих свойств CSS:

Синтаксис

/* Column width */
columns: 18em;

/* Column count */
columns: auto;
columns: 2;

/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

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

Свойство columns может быть задано одним или двумя значениями из списка ниже, в любом порядке.

Значения

<'column-width'>: Идеальная ширина столбца, заданная как <length> или ключевое слово auto. Фактическая ширина может быть шире или уже для подгонки к доступному пространству. См. column-width.
<'column-count'>: Идеальное число столбцов для вывода содержимого элемента, заданное как <integer> или ключевое слово auto. Если ни это значение, ни ширина столбца не auto, оно просто указывает на максимальное допустимое число столбцов. См. column-count.

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

Начальное значение	как каждое из свойств сокращения: `column-width`: `auto` `column-count`: `auto`
Применимо к	Блочные контейнеры, кроме контейнеров таблиц
Наследуется	нет
Вычисленное значение	как каждое из свойств сокращения: `column-width`: абсолютная длина, ноль или больше `column-count`: как указано
Тип анимации	как каждое из свойств сокращения: `column-width`: длина `column-count`: целое число

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

columns = 
  <'column-width'>  ||
  <'column-count'>  

<column-width> = 
  auto                                |
  <length [0,∞]>                      |
  min-content                         |
  max-content                         |
  fit-content( <length-percentage> )  

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

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Установка трёх равных столбцов

HTML

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

CSS

.content-box {
  columns: 3 auto;
}

Результат

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`columns`	5050	1212	52 9–74 До версии 37, множественные столбцы не работали с `display: table-caption` элементами.	11.115	93	50	52 22 До версии 37, множественные столбцы не работали с `display: table-caption` элементами.	11.114	93.2	5.0	502

См. также

© 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/columns