Век живи - век учись. Как-то знание про многоколоночную вёрстку прошло мимо меня, но наверстать никогда не поздно. Многоколоночная вёрстка не имеет отношения к 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-span: all
. У этого свойства могут быть только два значения - all или none.
Я сначала подумал, что это свойство будет "разрубать" колонки так, что текст каждой колонки будет снизу продолжаться, но нет, текст переносится вбок.
Свойство
column-count
разбивает контент родителя на заданное количество колонок. Если стоит auto, то количество зависит от заданного
column-width
.
Свойство
column-gap
задаёт расстояние между колонками, причём это же свойство потом стали использовать при flex и grid вёрстке.
Ну, у
column-rule
задаётся оформление разделителей между колонками, в виде привычного значения вроде
column-rule: 2px dotted #606060;
.
В общем, любопытный способ вёрстки, хотя имеет ограниченное применение, но выпендриться можно.
Кстати, если вы читаете этот пост на смартфоне с небольшим размером экрана, то никаких колонок вы здесь не увидете. Для ширины менее 430 пикселей поставил
column-count: 1;
.