CSS :: Свойство columns

Сокращенное css-свойство columns (от англ. columns – колонки) позволяет одновременно задавать как ширину, так и количество колонок многоколоночного текста.

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

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

Синтаксис

columns: column-width || column-count

Значения

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

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

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

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

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

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

		/* Вместится 4 колонки по 80px */
		.p_4{
		columns: 80px;
		}

		/* Просто делим на 4 колонки */
		.p_5{
		columns: 4;
		}

	</style>
	
</head>
<body>

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

Пример №1