Свойство CSS column-width
Свойство CSS column-width задаёт ширину колонок. Примеры и возможность попробовать самостоятельно.
Свойство CSS column-width задаёт желаемую ширину каждой колонки в многоколоночном макете. Вместо того чтобы указывать браузеру количество колонок, вы сообщаете ему нужную ширину каждой, а браузер сам вычисляет, сколько колонок поместится в доступном пространстве.
Это противоположный подход по сравнению с column-count, где количество колонок фиксировано, а их ширина варьируется. column-width делает многоколоночный текст адаптивным по умолчанию: чем шире контейнер, тем больше колонок появляется; чем он уже, тем меньше колонок остаётся — вплоть до одной.
Свойство column-width относится к свойствам CSS3.
Как работает column-width
Значение лучше всего понимать как минимально желаемую ширину, а не жёсткое ограничение. Браузер размещает столько колонок заданной (или большей) ширины, сколько помещается, а затем растягивает их, чтобы заполнить оставшееся пространство.
- Если контейнер вмещает несколько колонок заданной ширины, их будет несколько.
- Если контейнер уже указанного значения, будет одна колонка шириной контейнера — ширина никогда не выйдет за границы блока.
- Когда
column-countзадан одновременно,column-widthстановится максимальной шириной: браузер использует то из двух ограничений, которое даёт меньшее количество колонок. Для одновременной установки обоих существует сокращённое свойствоcolumns.
Приблизительная формула для предсказания результата: число колонок ≈ floor(ширина контейнера / (column-width + column-gap)). Значение column-gap по умолчанию равно 1em.
Когда использовать
Используйте column-width, когда нужна читаемая длина строк, адаптирующаяся к viewport — например, для вёрстки длинной статьи или списка коротких элементов в виде газетных колонок без медиазапросов. Поскольку количество колонок подстраивается автоматически, одно и то же правило работает как на телефоне (одна колонка), так и на широком десктопе (три-четыре колонки).
Современные браузеры поддерживают column-width без вендорных префиксов. Значение по умолчанию auto означает, что ширина колонки определяется другими свойствами, например column-count, или при отсутствии прочих ограничений используется одна колонка.
| Начальное значение | auto |
|---|---|
| Применяется к | Блочным контейнерам, кроме оборачивающих блоков таблиц. |
| Наследуется | Нет. |
| Анимируется | Да. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.columnWidth = "5px"; |
Синтаксис
Синтаксис свойства CSS column-width
column-width: auto | length | initial | inherit;Пример свойства column-width:
Пример свойства CSS column-width со значением длины
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-width: 80px;
}
</style>
</head>
<body>
<h1>Column-width property example</h1>
<p>Here the width of the column is set to 80px.</p>
<div>
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>Результат
![Свойство CSS column-width](https://api.w3docs.com/uploads/media/default/0001/03/5dc2724355e1e0cd7af891102d3b3d2c9e042376.png "CSS column-width Property" =420x)
Пример свойства column-width со значением "auto":
При значении auto браузер не устанавливает целевую ширину. В сочетании с column-count управление макетом передаётся правилу количества колонок; без дополнительных ограничений используется одна колонка.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-width: auto;
}
</style>
</head>
<body>
<h1>Column-width property example</h1>
<p>Here the width of the column is set to auto.</p>
<div>
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>Адаптивные колонки без медиазапросов
Поскольку браузер вычисляет количество колонок исходя из доступной ширины, одно правило column-width создаёт макет, который перестраивается самостоятельно. Здесь мы также добавляем column-gap и column-rule для разделения колонок. Измените размер превью, чтобы увидеть, как колонки появляются и исчезают.
<!DOCTYPE html>
<html>
<head>
<title>Responsive columns</title>
<style>
.news {
column-width: 14em;
column-gap: 2em;
column-rule: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="news">
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.
</div>
</body>
</html>Типичные ошибки
- Это ориентир, а не гарантия. Реальная ширина отрисованных колонок редко точно совпадает с заданным значением — браузер растягивает их, чтобы заполнить строку. Используйте это свойство для приблизительного контроля количества колонок, а не их точной ширины в пикселях.
column-widthиcolumn-countвзаимодействуют. Когда оба заданы, браузер трактуетcolumn-widthкак максимум и никогда не превышаетcolumn-count. Задавайте только одно из них, если намеренно не хотите ограничить оба параметра.- Высокое содержимое может создавать неравномерные колонки. Используйте
column-fillдля управления распределением содержимого по колонкам. - Проценты не допускаются. В отличие от многих свойств ширины,
column-widthпринимает только значение длины (px,em,ch, …) илиauto— но не%.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| auto | Ширина колонки определяется браузером. Это значение по умолчанию. | |
| length | Ширина колонки задаётся числовым значением длины. | |
| initial | Устанавливает свойство в значение по умолчанию. | |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
column-count— фиксирует количество колонок вместо их ширины.columns— сокращённая запись дляcolumn-widthиcolumn-count.column-gap— отступ между колонками.column-rule— линия, разделяющая колонки.column-span— позволяет элементу занимать все колонки.