columns CSS

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

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

auto

Значение по умолчанию:
`auto`
Наследуется:
Нет
Применяется:

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

Применяется:
К блочным элементам (кроме таблиц), ячейкам и элементам, у которых [`display`](/css/display/) установлен как `inline-block`
Анимируется:
Да
Объект JavaScript:

object.style.columns

Объект JavaScript:
`object.style.columns`
Спецификации:
Спецификации:
* [CSS Multi-column Layout Module](http://dev.w3.org/csswg/css3-multicol/#columns)
Поддержка браузерами:

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

Поддержка браузерами:
<p class="ciu_embed" data-feature="multicolumn" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=multicolumn">Can I Use multicolumn?</a> Data on support for the multicolumn feature across the major browsers from caniuse.com. </p>

Синтаксис

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

Значения

Комбинация свойств [`column-width`](/css/column-width/) и [`column-count`](/css/column-count/). Порядок значения не имеет. ### Примечание Firefox поддерживает свойство `-moz-columns`. Safari, Chrome и Android поддерживают свойство `-webkit-columns`.

Примеры

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

columns: 200px auto;

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

columns: 3 12em;

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

columns: 2;

Примеры

Ширина колонок 200 пикселов, количество задаётся браузером. columns: 200px auto; Три колонки минимальной ширины 12em каждая. columns: 3 12em; Две колонки, их ширина определяется браузером. columns: 2;

Содержание

  • Синтаксис
      /* 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;
  • Значения
    • Примеры
        Ширина колонок 200 пикселов, количество задаётся браузером. columns: 200px auto; Три колонки минимальной ширины 12em каждая. columns: 3 12em; Две колонки, их ширина определяется браузером. columns: 2;

    В начало