Свойство column-width

Свойство column-width задает ширину колонок в многоколоночном тексте. Значением свойства служат любые единицы для размеров, кроме процентов, либо ключевое слово auto (по умолчанию). При значении auto браузер сам подбирает оптимальную ширину колонок на основе column-count и column-gap.

Синтаксис

селектор {
	column-width: значение;
}

Пример . Указанная ширина

В данном примере указана ширина колонки column-width в 150px, а их количество column-count стоит в значении auto. В результате ширина колонок будет 150px, их количество и промежуток между ними браузер подберет сам:

<div id="elem">
	некий длинный текст
</div>

#elem {
	column-count: auto;
	column-width: 150px;
	text-align: justify;
}

Пример . Значение auto

В данном примере текст разобьется на 3 колонки (так как column-width стоит в значении 3), а вот их ширина вычислится автоматически:

<div id="elem">
	некий длинный текст
</div>

#elem {
	column-width: auto;
	column-count: 3;
	text-align: justify;
}

Смотрите также

свойство column-count,
которое задает количество колонок
свойство column-gap,
которое задает промежуток между колонками
свойство column-rule,
которое задает границу между колонками
свойство column-span,
которое задает количество столбцов, на которые должен растягиваться элемент
свойство columns,
которое является свойством-сокращением для многоколоночности