columns¶

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

Демо¶

Синтаксис¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/* 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.

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

1

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;

Комментарии