Свойство CSS columns
Свойство CSS columns задаёт ширину и количество колонок. Значения свойства и примеры использования.
Свойство CSS columns — это сокращённая запись, которая распределяет содержимое одного элемента по нескольким колонкам, как в газете. Оно одновременно задаёт два полных свойства:
column-count— максимальное количество колонок.column-width— минимальная ширина каждой колонки (рекомендуемое значение, а не фиксированное).
Вместо того чтобы писать обе строки:
.example {
column-width: 100px;
column-count: 3;
}достаточно написать одну:
.example {
columns: 100px 3;
}Значения можно указывать в любом порядке, поскольку одно из них — длина, а другое — целое число, и браузер легко их различает. Можно также указать только одно из значений, а второе примет значение по умолчанию auto.
Зачем использовать columns?
Многоколоночная вёрстка идеально подходит для длинных текстов — статей, определений, облаков тегов, — где нужно сократить длину строки для читателя. В отличие от Flexbox или CSS Grid, разметку не нужно делить на отдельные блоки: браузер распределяет один блок содержимого по колонкам и перераспределяет его при изменении размера контейнера.
Как взаимодействуют два значения
Значения описывают целевой результат, а браузер выбирает наилучший вариант:
column-widthвоспринимается как минимум. Браузер создаёт столько колонок заданной ширины, сколько позволяет контейнер.column-countограничивает их количество. Браузер не создаст больше колонок, чем это значение, даже если их поместится больше.
Таким образом, columns: 100px 3 означает: «создать колонки шириной не менее 100px, но не более 3 штук». В широком контейнере будет 3 колонки; по мере сужения контейнера их число уменьшится до 2, затем до 1, сохраняя ширину каждой ≥ 100px. Именно это делает вёрстку адаптивной без медиазапросов.
Если запрошенная ширина и количество колонок не могут уместиться в элементе одновременно, браузер отдаёт приоритет ширине и уменьшает количество колонок.
Свойство columns относится к числу свойств CSS3. Для управления промежутками и разделителями между колонками используйте column-gap и column-rule; чтобы заголовок занимал все колонки, воспользуйтесь column-span.
| Начальное значение | auto auto |
|---|---|
| Применяется к | Блочным контейнерам, кроме блоков-обёрток таблиц. |
| Наследуется | Нет. |
| Анимируемо | Да. Анимируется только column-width. |
| Версия | CSS3 |
| DOM Синтаксис | object.style.columns = "100px 2"; |
Синтаксис
Синтаксис свойства CSS columns
columns: [ <'column-width'> || <'column-count'> ] | auto | initial | inherit;Пример свойства columns:
Пример свойства CSS columns с column-width и column-count
<!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>Результат
В следующем примере каждая колонка имеет ширину не менее 50px, а максимальное количество колонок ограничено 5. Поскольку колонки узкие, браузер может разместить до 5 колонок в широком контейнере — и меньше при его сужении:
Пример с меньшей шириной и большим максимальным числом колонок
Пример свойства CSS columns с column-width и column-count в качестве значений
<!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>Значения
| Значение | Описание |
|---|---|
auto | Оба свойства column-width и column-count устанавливаются в auto. Это значение по умолчанию. |
<length> | Задаёт минимальную ширину колонок. |
<integer> | Задаёт максимальное количество колонок. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Наследует свойство от родительского элемента. |
Распространённые ошибки
- Это рекомендация, а не жёсткое требование.
column-width— это минимум, поэтому фактическая ширина колонки почти всегда больше заданного значения. Чтобы зафиксировать точную ширину, необходимо также управлять размером контейнера. - Колонки выравниваются, а не заполняются сверху вниз. По умолчанию браузер стремится сделать все колонки примерно одинаковой высоты, а не заполнить первую колонку до конца перед переходом к следующей.
- Следите за переносами. Длинные слова или неразрывные элементы могут выходить за пределы узкой колонки;
break-inside: avoidпомогает сохранить целостность элементов, например карточек. - Анимируется только
column-width. Количество колонок меняется скачкообразно между целыми числами, поэтому переходы для него не будут плавными.