Вывод сложного контента в несколько колонок средствами CSS: column-count, column-gap, page-break-inside

Расскажу про использование CSS multi-column layout module. Допустим у нас есть многоуровневый список.

Для основного содержимого страницы он узковат, и возникает желание выводить его в несколько колонок. Для этого используем CSS-свойства column-count: 4 и column-gap: 10px. Первое задает на сколько колонок разбить контент, второе — какой между ними зазор.

Плохо выглядит вторая колонка, потому что при переносе не учлась вложенность списков. Это решается с помощью свойства page-break-inside: avoid. Оно регулирует «разрывы страницы». В примере я запретил разрывы внутри li-элементов списка верхнего уровня.

Полный код и демо можно посмотреть здесь.

Column-count и column-gap работают как минимум в Firefox 3.6 (с префиксом -moz) и Opera 11.50.

Page-break-inside в Firefox 3.6 не работает, а в Opera 11.50 работает.

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