columns¶

Универсальное свойство columns позволяет одновременно задать ширину и количество колонок многоколоночного текста.

Демо¶

Колонки и таблицы

Синтаксис¶

/* Column width */
columns: 1em;

/* Column count */
columns: auto;
columns: 1;

/* Combination of column width and count */
columns: 1 auto;
columns: auto 12em;
columns: auto auto;

/* Global values */
columns: inherit;
columns: initial;
columns: unset;

Значения¶

Комбинация свойств column-width и column-count. Порядок значения не имеет.

Примечание¶

Firefox поддерживает свойство -moz-columns.

Safari, Chrome и Android поддерживают свойство -webkit-columns.

Значение по-умолчанию:

columns: auto;

Применяется к блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block

Спецификации¶

CSS Multi-column Layout Module

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

Can I Use multicolumn? Data on support for the multicolumn feature across the major browsers from caniuse.com.

Описание и примеры¶

Ширина колонок 200 пикселов, количество задаётся браузером.

1	`columns: 200px auto;`

Три колонки минимальной ширины 12em каждая.

1	`columns: 3 12em;`

Две колонки, их ширина определяется браузером.

1	`columns: 2;`