Сказ о стилизации gap в multi-column или как теперь можно стилизовать пробелы
Многие из нас уже давно используют колонки с своей верстке, и также многие сталкивались с трудностями стилизации отступов между ними (каждый раз это напоминало танец с бубнами).
Ну что ж, Хром предлагает забыть об этой проблеме и ввел 2 новых свойства для этого решения: column-rule
и row-rule
. Давайте рассмотрим, что это за звери такие.
У нас есть многоколоночный макет, где используется column‑width
свойство, и чтобы стилизовать отступы в таком макете, нам достаточно column-rule
свойство:

И теперь мы видим такой результат:

Также в проекте спецификации указано, что column-rule
свойство также работает в макетах Flexbox и Grid.


Главное преимущество здесь в том, что декорирование происходит только в CSS (где ему и положено) без влияния на нашу семантическую разметку.
Но это еще не все. Также есть и свойство, благодаря которому можно стилизовать линии между строками, и это свойство row-rule


Как мы видим, новое свойство предлагает нам обширное поле для взаимодействия и не надо использовать старые костыли для стилизации.
Но в этой сладкой бочке меда есть заметная ложка дегтя. И это поддержка этих свойств.
Если еще column-rule
и поддерживается всеми распространенными браузерами последней версии

То вот со свойством row-rule
все намного печальнее

Нам остается ждать, когда можно будет воспользоваться эти свойством.
Функция декорирования пробелов CSS все еще реализуется в Chromium и нам только остается ждать когда она будет полностью внедрена в разработку.
Что вы об этом думаете? Будут ли вам полезны эти свойства в будущем?