Многоколоночность на CSS подробнее

На одном сайте, который я поддерживаю, в сайдбаре выводится список ссылок на месячные архивы записей. Так вот, он сильно вырос за несколько лет и я решил выводить его более компактно в 2 колонки.

Для решения такого вопроса можно использовать разные подходы. Я остановился на использовании свойств многоколоночности в CSS3.

создание нескольких колонок на CSS

Чаще всего многоколоночность используется для вывода текста в газетах и журналах. Более узкие колонки легче вопринимаются зрением. Раньше отобразить контент таким образом было довольно сложным, и обычно для этого использовалось разделение текста на несколько div’ов. Но все стало намного проще с CSS3 Multi Column Module.

Официальная спецификация, Поддержка браузерами.

Создание контента, разбитого на несколько колонок

В примере на картинке ниже текст заключен в HTML5-тег article, к которому применены стили, разбивающие содержимое на 2 столбца:

При помощи свойства column-width можно задать колонкам необходимую ширину:

Интервал между столбцами

Интервал задается свойством column-gap в px или em, и не может быть отрицательным:

Разделитель колонок

Свойство column-rule позволяет добавлять разделитель между столбцами, принцип работы схож с border.

Объединение колонок

Свойство column-span работает аналогично с colspan в table, объединяя нужные столбцы. На картинке ниже заголовок h1 занимает пространство всех 3-х столбцов.

Итог

Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Вы можете применять это свойство к любым элементам: div, list и т.п., разбивая таким образом списки или вывод записей.

Список поддерживаемых браузеров достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную javascript-библиотеку.

Добавьте комментарий