Сказ о стилизации gap в multi-column или как теперь можно стилизовать пробелы

Многие из нас уже давно используют колонки с своей верстке, и также многие сталкивались с трудностями стилизации отступов между ними (каждый раз это напоминало танец с бубнами).

Сказ о стилизации gap в multi-column или как теперь можно стилизовать пробелы

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

Сказ о стилизации gap в multi-column или как теперь можно стилизовать пробелы

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

Сказ о стилизации gap в multi-column или как теперь можно стилизовать пробелы
Сказ о стилизации gap в multi-column или как теперь можно стилизовать пробелы

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

Но это еще не все. Также есть и свойство, благодаря которому можно стилизовать линии между строками, и это свойство row-rule.

Сказ о стилизации gap в multi-column или как теперь можно стилизовать пробелы
Сказ о стилизации gap в multi-column или как теперь можно стилизовать пробелы

Как мы видим, новое свойство предлагает нам обширное поле для взаимодействия и не надо использовать старые костыли для стилизации.

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

Сказ о стилизации gap в multi-column или как теперь можно стилизовать пробелы

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

Сказ о стилизации gap в multi-column или как теперь можно стилизовать пробелы

Функция декорирования пробелов CSS все еще реализуется в Chromium и нам только остается ждать когда она будет полностью внедрена в разработку.

Что вы об этом думаете? Будут ли вам полезны эти свойства в будущем?