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

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

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

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

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

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

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

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

article {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
}

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

article {
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
}

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

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

article {
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
}

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

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

article {
-moz-column-rule: 1px dotted #ccc;
-webkit-column-rule: 1px dotted #ccc;
column-rule: 1px dotted #ccc;
}

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

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

article h1 {
-webkit-column-span: all;
column-span:all;
}

Итог

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

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

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

* Нажимая на кнопку "Отправить" Вы соглашаетесь с политикой конфиденциальности.