CSS свойство columns

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

column-count, которое определяет максимальное количество столбцов.
column-width, которое определяет минимальную ширину столбцов.

Вместе эти два свойства создают многостолбцовую верстку, которая адаптируется к ширине контейнера, обычно уменьшая количество столбцов по мере уменьшения доступного пространства.

Свойство columns является одним из свойств CSS3.

Задание одновременно column-count и column-width не всегда целесообразно, так как это может ограничить гибкость и отзывчивость макета.

INFO

Если ширина и количество столбцов не помещаются в ширину элемента, браузер автоматически уменьшит количество столбцов, чтобы уложиться в заданные минимальные ширины столбцов.

Начальное значение	auto auto
Применяется к	Блочным контейнерам, за исключением обёрток таблиц.
Наследуется	Нет.
Анимация	Да. Анимировать можно только `column-width`.
Версия	CSS3
Синтаксис DOM	object.style.columns = "100px 2";

Синтаксис

Синтаксис свойства CSS columns

css

columns: [ <'column-width'> || <'column-count'> ] | auto | initial | inherit;

Пример свойства columns:

Пример свойства CSS columns со свойствами column-width и column-count

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        columns: 100px 3;
      }
    </style>
  </head>
  <body>
    <h2>Columns property example</h2>
    <div class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Результат

Свойство CSS columns

В следующем примере минимальная ширина для каждого столбца установлена в 50px, а максимальное количество столбцов — в 5:

Пример свойства columns с заданной шириной и количеством столбцов:

Пример свойства CSS columns со свойствами column-width и column-count в качестве значений

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        columns: 50px 5;
      }
    </style>
  </head>
  <body>
    <h2>Columns property example</h2>
    <div class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
`auto`	Оба свойства `column-width` и `column-count` установлены в `auto`. Это значение по умолчанию.
`<length>`	Устанавливает минимальную ширину для столбцов.
`<integer>`	Устанавливает максимальное количество столбцов.
`initial`	Устанавливает свойство в его значение по умолчанию.
`inherit`	Наследует свойство от родительского элемента.

Практика

Какие свойства используются для создания многостолбцовой верстки в CSS?

column-count и column-gapcolumn-width и column-spancolumn-line и column-blockcolumn-height и column-space

CSS свойство columns ​

Синтаксис ​

Пример свойства columns: ​

Результат ​

Пример свойства columns с заданной шириной и количеством столбцов: ​

Значения ​