2.23. CSS3 columns

css3-columnsCSS3 columns — концепция многоколоночной разметки, которая позволяет разбивать контент на колонки. Колонки могут содержать заголовки, текст, таблицы, картинки и любые другие inline-элементы.

Создание многоколоночной разметки с помощью модели CSS3 columns

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

IE: 10.0
Firefox: 9.0 -moz-
Chrome: 4.0 -webkit-
Safari: 3.0 -webkit-
Opera: 11.1, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: 8
Android Browser: 2.1 -webkit-
Chrome for Android: 44 -webkit-

1. Количество колонок column-count

Свойство позволяет явно задать необходимое число колонок, а их ширина будет рассчитываться, исходя из ширины доступного пространства. По умолчанию браузер добавляет промежуток между колонками по горизонтали, равный 1em. Если ширина изображения больше ширины колонки, то оно будет обрезано. Если одновременно с column-count задается column-width, то значение column-count будет считаться максимальным числом колонок (столбцов). Свойство не наследуется.

column-count
Значения:
число Предпочтительное количество колонок задаётся целым числом.
auto Значение по умолчанию, количество столбцов будет определяться другим свойством, например, column-width.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

section {
-webkit-column-count: 3; 
-moz-column-count: 3; 
column-count: 3;
}
column-count
Рис. 1. Пример многоколоночной разметки

2. Ширина колонок column-width

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

column-width
Значения:
длина Ширина колонок задаётся в единицах длины, кроме %.
auto Значение по умолчанию, ширина колонок определяется браузером.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

section {
-webkit-column-width: 100px; 
-moz-column-width: 100px; 
column-width: 100px;
}

3. Ширина пустого пространства между колонками column-gap

Свойство управляет промежутком между колонками. Если для колонок установлена разделительная линия с помощью свойства column-rule, то эта линия будет расположена посредине промежутка, а ее ширина не изменит общую ширину. Свойство не наследуется.

column-gap
Значения:
длина Промежуток между колонками задается в единицах длины, кроме %.
normal Значение по умолчанию. Эквивалентно 1em.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

section {
-webkit-column-gap: 40px; 
-moz-column-gap: 40px;
column-gap: 40px;
}
column-gap
Рис. 2. Промежутки между колонками

4. Позиционирование элемента на несколько колонок column-span

Свойство задаёт количество колонок, которое пересечет выбранный элемент. Указывается не для блока-контейнера, а для для конкретного элемента внутри, например, для заголовка.

Если нужно, чтобы изображение растянулось на все колонки, задаётся img {display: block; -webkit-column-span: all; column-span: all;}. Свойство не наследуется.

column-span
Значения:
1 Значение по умолчанию. Элемент расположен в одной колонке.
all Элемент будет распространен на все колонки.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

h1 {
-webkit-column-span: all; 
column-span: all;
}
column-span
Рис. 3. Позиционирование заголовка на все колонки

5. Стиль разделительной линии column-rule-style

Свойство создаёт внутри пустого пространства между колонками вертикальную полосу — разделительную линию. Если не задан цвет линии, то некоторые эффекты не будут отображаться. Не наследуется.

column-rule-style
Значения:
none Значение по умолчанию, означает отсутствие линии. Цвет и ширина, заданные для линии, игнорируются.
hidden Аналогично со значением none, линия скрыта.
dotted Отображает линию набором квадратных точек.
dashed Отображает линию как последовательность из тире.
solid Обычная линия.
double Отображает разделительную линию в виде двух параллельных тонких линий, расположенных на некотором расстоянии между собой. Толщина разделительной линии не указывается, но сумма линий и промежутка между ними равна значению column-rule-width.
groove Отображает линию объемной, вдавленной в полотно. Это достигается путем создания тени из двух цветов, один из которых темнее, другой — светлее.
ridge Отображает разделительную линию объемной, т.е. эффект, противоположный groove.
inset Отображает сплошную линию цветом темнее, чем заданный цвет линии.
outset Отображает сплошную линию цветом, заданным свойством column-rule-color.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

section {
-webkit-column-rule-style: dotted; 
-moz-column-rule-style: dotted; 
column-rule-style: dotted;
}
column-rule-style
Рис. 4. Стиль разделительной линии

6. Ширина разделительной линии column-rule-width

Свойство устанавливает ширину разделительной линии. Не работает без свойства column-rule-style. Не наследуется.

column-rule-width
Значения:
medium Значение по умолчанию. Средняя толщина линии.
thin Тонкая линия.
thick Утолщенная линия.
длина Ширина разделительной линии задается в единицах длины.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

section {
-webkit-column-rule-style: dotted; 
-moz-column-rule-style: dotted; 
column-rule-style: dotted;
-webkit-column-rule-width: 10px; 
-moz-column-rule-width: 10px; 
column-rule-width: 10px;
}
column-rule-width
Рис. 5. Ширина разделительной линии

7. Цвет разделительной линии column-rule-color

Свойство позволяет изменить цвет разделительной линии, которая наследует цвет текста. Не наследуется.

column-rule-color
Значения:
цвет Цвет линии можно задать с помощью различных способов: HEX, RGB, RGBA, HSL, HSLA, а также с помощью 140 кроссбраузерных названий цветов.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

section {
-webkit-column-rule-style: dotted; 
-webkit-column-rule-width: 5px; 
-webkit-column-rule-color: #59ACE7; 
-moz-column-rule-style: dotted; 
-moz-column-rule-width: 5px; 
-moz-column-rule-color: #59ACE7; 
column-rule-style: dotted;
column-rule-width: 5px;
column-rule-color: #59ACE7;
}
column-rule
Рис. 6. Цвет разделительной линии

8. Краткая запись стилей разделительной линии column-rule

Свойство позволяет задать в одном объявлении три свойства разделительной линии — ширину column-rule-width, стиль column-rule-style и цвет column-rule-color. Не наследуется.

column-rule
Значения:
ширина разделительной линии Значение по умолчанию medium.
стиль разделительной линии Значение по умолчанию none.
цвет разделительной линии По умолчанию принимает цвет элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

section {
-webkit-column-rule: 5px dotted #59ACE7; 
-moz-column-rule: 5px dotted #59ACE7; 
column-rule: 5px dotted #59ACE7;
}

9. Установка колонок с помощью одного свойства columns

Свойство представляет собой краткую запись свойств column-width и column-count, одновременно задает ширину и количество колонок. Не наследуется.

column-rule
Значения:
auto Значение по умолчанию, ширина и количество принимают значение auto.
ширина колонок Значение по умолчанию auto.
количество колонок Значение по умолчанию auto.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

section {
-webkit-columns: 100px 3; 
-moz-columns: 100px 3; 
columns: 100px 3;
}
  • Тахир Азизов

    А есть ли смысл пользоваться этим, если есть более гибкий flex?

    • Спасибо за вопрос. На практике колонки на сайтах встречаются редко. Но это не то же самое, что и флексбокс.
      Возьмем к примеру абзац текста, который вы хотите разбить на три колонки. CSS3 columns разбивает содержимое абзаца, при этом текст плавно перетекает из одной колонки в другую, т.е. из одного элемента вы условно делаете три.
      Флексбокс управляет положением элементов на странице, выравнивая их в заданном направлении, управляя их размерами, при этом не меняя структуру их внутреннего содержимого.

      • Создание Сайтов

        А каким образом происходит перетекание текста по колонкам?

        • Как работают css-колонки:
          1. задаётся количество колонок с помощью свойства column-count.
          2. браузер разбивает содержимое блока, для которого задано это свойство, таким образом, чтобы получились одинаковые по высоте колонки. При изменении ширины блока текст снова распределится таким образом (добавляясь или убираясь из одной колонки в другую), чтобы высота колонок снова была одинаковой. То есть количество текста в каждой колонке будет другим. Поэтому и говорится, что текст как бы перетекает из одной колонки в другую. А содержимое flex-блока всегда будет одним и тем же.

          • Создание Сайтов

            То есть, если я поставлю вывод содержимого страницы в контейнер column-count, то контент автоматически растечется по колонкам?

          • Посмотрите пример http://codepen.io/nazarelen/pen/vGeKaR.
            Это свойство подходит для блока, внутри которого находятся текст, картинки, заголовки и т.п. То есть страница формируется по принципу газеты.

          • Создание Сайтов

            Благодарю, а как высота выставляется? автоматически? Если мне например нужна определенная высота.

          • Высота рассчитывается автоматически, так чтобы все колонки были одной высоты и полностью заполнены. Если вы выставите высоту принудительно, может образоваться пустое пространство.
            Если вы еще раз откроете пример и найдете там во вкладке CSS строчку /*height: 300px;*/, уберете знаки /* и */, то увидите, как это работаете.

            Кстати, в моих примерах в этом редакторе можно изменять код и смотреть как он действует, а потом просто закрывать страницу.

          • Создание Сайтов

            Все понял, спасибо. Возможно такое пригодится.

          • Пожалуйста. Для несложных страниц, думаю будет удобно. И не забывайте про поддержку браузерами.

  • Александр

    Что использовать лучше flexbox или columns для адаптивности?

    • Посмотрите пример http://codepen.io/nazarelen/pen/MyPJwd.

      Columns предполагают меньше стилей, нужно всего лишь задать ширину колонок и ширину пустого пространства между ними в относительных единицах (em, %, rem).

      Для Flexbox нужно задействовать медиа запросы, иначе столбцы будут просто уменьшаться в ширину. (посмотреть адаптивность в редакторе Codepen можно, подвигав в стороны светло-серую границу.

      • Александр

        А подскажите наиболее адаптивные и удобные единицы измерения? em, rem, vh и прочие?

        • Для начала установим разницу в вычислениях:
          em — относительно текущего размера шрифта родительского блока;
          rem — относительно значения font-size корневого элемента — html;
          vw, vh — относительно размера экрана.
          Задавая ширину колонки в em: column-width: 15em; вы задаете виртуальную минимальную ширину, так как по факту ширина колонки будет больше или меньше (то есть если три колонки такой ширины не поместятся на экране, будет две. не поместятся две — будет одна).
          Честно, я ещё не пользовалась этими свойствами, наверно потому, что такая реализация не под все случаи подходит и нет поддержки в старых браузерах. Хотя можно было бы flex в создании навигации использовать, очень удобно по высоте и ширине элементы выравнивать.
          В отношении что удобнее — это вопрос привычки, я обычно использую em, для сетки %, px и свойство calc. Но есть вариант комбинации em и rem, посмотрите https://css-tricks.com/rems-ems/.

          • Александр

            Благодарю за профессиональный ответ. Подскажите пожалуйста еще один вопрос — Могу ли я колонками не текстовые блоки а div реализовывать, по моему это masonry называется? И будет ли это преимущественно лучше чем флексами?

          • Пожалуйста. Да, можете. Флексы как раз для такого эффекта не подходят, так как они держат одинаковую высоту в одном ряду.

          • Александр

            Колонки тоже можно фиксированной высоты сделать?

          • Если можно так сказать, высота генерируется, а не задаётся, в этом и есть смысл колонок. Блок для колонок по высоте равен высоте самой высокой колонки. При изменении области просмотра содержимое колонок плавно перетекает из одной в другую, изменяя высоту блока и колонок. А так как содержимое разное по высоте, то всегда будут пустые области. Фиксировать высоту можно лишь в том случае, если вы уверены, что содержимое каждого блока никогда не будет его переполнять. Для картинок это не подходит, так как они масштабируются. Вы можете поэкспериментировать в предложенном примере, добавив высоту в div p (эти изменения не сохраняются).

          • Александр

            Благодарю Вас, Вы мне очень помогли))

          • Пожалуйста! А вам спасибо за интересный вопрос

          • Если брать только одни картинки одинаковых размеров, то их без дополнительной обертки можно сделать.