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

Определение и применение

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

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
column-width	50.0 4.0 -webkit-	2.0 -moz-	37.0* 15.0 -webkit-	9.0 3.1 -webkit-	10.0	12.0

CSS синтаксис:

column-width:"auto | length | initial | inherit";

JavaScript синтаксис:

object.style.columnWidth = "200px"

Значения свойства

Значение	Описание
auto	Указывает, что ширина колонок должна быть определена браузером автоматически на основании значений других свойств, например, таких свойств как column-count(задает количество колонок). Это значение по умолчанию.
length	Значение указывает оптимальную ширину колонки. Ширина колонки может быть шире при наличии свободного места, или уже в случае если указанное значение больше возможной ширины колонки. Значение ширины указывается в единицах измерения длины CSS (px, mm, pt, и т.п.). Значение должно быть строго положительным. Обращаю Ваше внимание, что в настоящее время значения указанные в процентах не допускаются.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства column-width</title>
<style>
.container {
-webkit-column-width: 200px;  /* для поддержки ранних версий браузеров */
-moz-column-width: 200px;  /* для поддержки ранних версий браузеров */
column-width: 200px;  /* задаем оптимальную ширину для колонок */
}
</style>
</head>
	<body>
		<div class = "container">
			Этот гигантский грызун представляет собой жирного зверька с продолговатым телом,
			покрытым жёсткой лохматой шерстью пёстрой коричневой расцветки. Передние лапы у капибары длиннее задних,
			массивный огузок не имеет хвоста, и поэтому у неё всегда такой вид, будто она вот-вот собирается сесть.
			У неё крупные лапы с широкими перепончатыми пальцами, а когти на передних лапах, короткие и тупые, удивительно напоминают миниатюрные копыта.
			Вид у неё весьма аристократический: её плоская широкая голова и тупая, почти квадратная морда имеют благодушно-покровительственное выражение,
			придающее ей сходство с задумчивым львом. По земле капибара передвигается характерной шаркающей походкой или скачет вразвалку галопом,
			в воде же плавает и ныряет с поразительной лёгкостью и проворством.
			Капибара — флегматичный добродушный вегетарианец, лишённый ярких индивидуальных черт, присущих некоторым его сородичам,
			но этот недостаток восполняется у неё спокойным и дружелюбным нравом.
		</div>
	</body>
</html>

CSS свойства