Персональный сайт Дмитрия Журавлева

Век живи - век учись. Как-то знание про многоколоночную вёрстку прошло мимо меня, но наверстать никогда не поздно. Многоколоночная вёрстка не имеет отношения к flex или grid, это ещё один способ организации контента внутри родителя. Причём поддержка идёт и в старых браузерах, что является незначительным плюсом. Вёрстка становится похожа на газетную, текст читается легче, правда не уверен, что на смартфонах будет удобно. Но никто не мешает для смартфонов это отключить, а для обычных мониторов оставить как есть. Для создания колонок на родителе используются CSS-свойства column-count, column-width, column-gap и column-rule. Причём column-rule - это shorthand-свойство для column-rule-width, column-rule-style и column-rule-color. Также есть свойство column-span, но оно ставится на потомка, а не родителя. Я сначала подумал, что это свойство будет "разрубать" колонки так, что текст каждой колонки будет снизу продолжаться, но нет, текст переносится вбок.

Свойство column-count разбивает контент родителя на заданное количество колонок. Если стоит auto, то количество зависит от заданного column-width. Свойство column-gap задаёт расстояние между колонками, причём это же свойство потом стали использовать при flex и grid вёрстке. Ну, у column-rule задаётся оформление разделителей между колонками, в виде привычного значения вроде column-rule: 2px dotted #606060;.

В общем, любопытный способ вёрстки, хотя имеет ограниченное применение, но выпендриться можно.

Кстати, если вы читаете этот пост на смартфоне с небольшим размером экрана, то никаких колонок вы здесь не увидете. Для ширины менее 430 пикселей поставил column-count: 1;.