На одном сайте, который я поддерживаю, в сайдбаре выводится список ссылок на месячные архивы записей. Так вот, он сильно вырос за несколько лет и я решил выводить его более компактно в 2 колонки с помощью свойств CSS column.
Чаще всего многоколоночность используется для вывода текста в газетах и журналах. Более узкие колонки легче вопринимаются зрением. Раньше отобразить контент таким образом было довольно сложным, и обычно для этого использовалось разделение текста на несколько div’ов. Но все стало намного проще с CSS3 Multi Column Module.
Официальная спецификация, Поддержка браузерами.
Создание контента, разбитого на несколько колонок
В примере на картинке ниже текст заключен в HTML5-тег article, к которому применены стили, разбивающие содержимое на 2 столбца:
|
1 2 3 4 5 |
article { -webkit-column-count:2; -moz-column-count:2; column-count:2; } |
При помощи свойства column-width можно задать колонкам необходимую ширину:
|
1 2 3 4 5 |
article { -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px; } |
Интервал между столбцами
Интервал задается свойством column-gap в px или em, и не может быть отрицательным:
|
1 2 3 4 5 |
article { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } |
Разделитель колонок
Свойство column-rule позволяет добавлять разделитель между столбцами, принцип работы схож с border.
|
1 2 3 4 5 |
article { -moz-column-rule: 1px dotted #ccc; -webkit-column-rule: 1px dotted #ccc; column-rule: 1px dotted #ccc; } |
Объединение колонок
Свойство column-span работает аналогично с colspan в table, объединяя нужные столбцы. На картинке ниже заголовок h1 занимает пространство всех 3-х столбцов.
|
1 2 3 4 |
article h1 { -webkit-column-span: all; column-span:all; } |
Итог
Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Вы можете применять это свойство к любым элементам: div, list и т.п., разбивая таким образом списки или вывод записей.
Список поддерживаемых браузеров достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную javascript-библиотеку.
