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

css-свойство column-width (от англ. column width – ширина колонки) задает оптимальную ширину для колонок многоколоночного элемента. При этом количество колонок, на которое будет разделен элемент, зависит от количества колонок указанной пользователем ширины, которые смогут поместиться внутри элемента.

Характеристики

Значение по умолчанию: auto.
Применяется: к блочным элементам (за исключением таблиц), а также ячейкам и к элементам, у которых значение свойства display установлено в inline-block.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.columnWidth="value".

Синтаксис

column-width: <ширина> | auto

Значения

auto – браузер будет устанавливать ширину колонок автоматически.
ширина – любые доступные в CSS единицы измерения (смотреть). Отрицательные значения и проценты не допускаются.

Если свойством column-count будет задано большее число колонок, чем их может поместиться указанной ширины в элемент, браузер произведет их сокращение до требуемого количества, проигнорировав значение свойства column-count. В тоже время, если свойством column-count будет задано меньшее число колонок, чем их может поместиться указанной ширины в элемент, браузер проигнорирует значение свойства column-width, увеличив при этом ширину колонок до заполнения доступного пространства.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-multicol-1/#propdef-column-width

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/column-width

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		width: 400px;
		margin: 1em;
		padding: 0.7em;
		border: 1px solid green;
		}
		
		/* Разбиваем на две колонки по 150px */
		.p_1{
		column-width: 150px;
		}

		/* Может вместиться только 2 колонки по 150px */		
		.p_2{
		column-width: 150px;
		column-count: 3;
		}

		/* Может вместиться 7 колонок, но задано только 3, */
		/* поэтому column-width просто игнорируется */		
		.p_3{
		column-width: 50px;
		column-count: 3;
		}		

	</style>
	
</head>
<body>

	<p class="p_1">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p> 
 
	<p  class="p_2">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p>
 
	<p  class="p_3">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p>	
	
 </body>
</html>

Пример №1