Свойство CSS `column-width`

Свойство column-width CSS задаёт идеальную ширину столбца в многоколоночном макете.

Попробуйте

column-width: auto;

column-width: 6rem;

column-width: 120px;

column-width: 18ch;

<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%;
  columns: auto;
  text-align: left;
}

Синтаксис

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

/* <length> values */
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;

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

Значения

Это свойство задаётся одним из следующих значений:

<length>

Задаёт оптимальную ширину столбца. Фактическая ширина столбца может отличаться от заданного значения: при необходимости она может быть больше, чтобы заполнить доступное пространство, и меньше, если доступного пространства недостаточно. Значение должно быть строго положительным, иначе объявление недопустимо. Процентные значения также недопустимы.

auto

Ширина столбца определяется другими свойствами CSS, например column-count.

Описание

Свойство column-width задаёт предпочтительную ширину столбца в многоколоночном макете. Контейнер будет содержать столько столбцов, сколько в него поместится, при этом ширина каждого из них будет не меньше значения column-width. Если ширина контейнера меньше заданного значения, ширина единственного столбца будет меньше объявленной ширины столбца.

Это свойство помогает создавать адаптивные макеты, подходящие для экранов разных размеров. Особенно при наличии свойства column-count (которое имеет приоритет) необходимо задать все связанные значения длины, чтобы получить точную ширину столбца. Для горизонтального текста это width, column-width, column-gap и column-rule-width.

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

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

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

column-width = 
  auto |
  <length [0,∞]>

Примеры

Задание ширины столбца в пикселях

HTML

<p class="content-box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis
  nisl ut aliquip ex ea commodo consequat.
</p>

CSS

.content-box {
  column-width: 100px;
}

Результат

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

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

См. также

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