Декораторы отступов, или свойства, которые у нас уже давно были

05.06.2026 • css

Введение

Прошло ровно 2 года с момента выхода explainer (как это слово по-русски будет?) про Gap Decorations. И буквально пару недель назад вышел стабильный Chrome 149, в котором эти “разделители” были реализованы.

На самом деле, всё это базируется на функционале многоколоночных раскладок. Уже давно, порядка 10 лет, у нас есть возможность стилизовать отступы между колонками с помощью свойства column-rule.

Авторы новой спеки взяли старый функционал за основу и расширили его на Flexbox и Grid.

Объяснение старых и новых свойств

Для начала посмотрим на простой column-rule в многоколоночной раскладке:

.columns {
    column-count: 2;
    column-rule: 3px solid #4eb0da;
    column-gap: 40px;
}

Как можно видеть, column-rule является близким родственником border и рисует знакомую нам границу, только уже между колонками.

А дальше будут примеры, которые потребуют браузерной поддержки, имейте ввиду.

Для начала посмотрим, как работает column-rule во флексбоксах.и гридах:

Выглядит похоже, не правда ли? И даже тут начинается интересное. Дело в том, что можно… указать несколько значений. И тогда они начинают работать поочерёдно:

.layout {
    column-rule:
        3px solid currentColor,
        repeat(auto, 3px solid #4eb0da,
        3px solid currentColor;
}

Зачем ограничиваться одной осью, давайте добавим декораторы и по другой оси, используя row-rule:

.layout {
    column-rule: 3px solid #4eb0da;
    row-rule: 1px solid currentColor;
}

Сюрприз. Дело в том, что row-rule у нас тоже уже был! В 145м Хроме появились двухмерные многоколоночные раскладки, а с ними и разделители по второй оси.

Если вам нужны одинаковые значениям по обеим осям, то column-rule / row-rule можно объединить в одном свойстве, rule. Более того, это же относится и к последующим свойствам, поэтому я буду рассказывать про rule- что-нибудь, а вы держите в голове, что rule- – это просто сокращение к column-rule- + row-rule-, их можно задавать независимо и с разными значениями.

По одной оси разделители нарисовали, по другой – тоже, что дальше? Конечно, дружить эти разделители между собой.

rule-break позволяет задать один из режимов пересечения декораторов:

• normal. Декораторы рисуются независимо, и не рисуются под объединёнными элементами (особенно актуально для “объединения” ячеек в гридах, span)
• none. Декораторы рисуются независимо друг от друга, и рисуются под объединёнными элементами
• intersection. Декораторы обрываются на пересечении и не упираются в элементы

нижний элемент прозрачный для наглядности, декоратор рисуется “под” элементом, а не над

Есть отдельный набор свойств для того, чтобы настроить “сдвиг” от gap (отступа). Другими словами, сузить или даже увеличить декоратор:

.layout {
    rule-inset: 6px;
}

На самом деле, это свойство является сокращением к 4м свойствам!

• rule-inset-cap-start
• rule-inset-cap-end
• rule-inset-junction-start
• rule-inset-junction-end

(плюс аналогичные свойства для column-rule-inset-, плюс аналогичные свойства row-rule-inset-, итого аж 12 свойств)

inset-cap позволяет задавать отступ до края элемента, а inset-junction – до пересечений и дочерних элементов.

Ещё один способ настройки пересечения – свойство rule-overlap. Оно позволяет задать порядок отрисовки “строковых” декораторов над “колоночными”:

.layout {
    rule-overlap: row-over-column; /* или column-over-row */
}

Кроме того, отдельное свойство позволяет контролировать отрисовку декораторов около пустых ячеек:

.layout {
    /* Показываем между элементами */
    rule-visibility-items: between;
}

Примеры

Много примеров собрали разработчики спеки на странице в GitHub pages.

Среди них можно заметить всевозможные структуры данных (расписания, календари, дашборды). Новые свойства отлично подходят для того, чтобы красиво рисовать сетки, и это именно то, чего нам не хватало в гридах.

Есть также примеры и декоративного использования, например, в меню, футерах и подобном. Это бывает полезно, когда два разных элемента рядом, и хочется визуально отделить их друг от друга.

И последний вариант использования из этих примеров – декораторы для крупных блоков сайта а-ля новостные колонки из газеты. Мне кажется, это наиболее редкий пример использования, но кому-то точно пригодится.

Итого

Новые свойства – очень мощная добавка к существующим флексбоксам и гридам. Если они будут к месту (и если браузерная поддержка позволит) – это сэкономит кучу усилий. Вполне возможно, те же сценарии именно с гибкими лейаутами вообще не реализовать на чистом CSS без новых свойств.

Это именно те свойства, про которые в определённый момент стоит рассказать вашему дизайнеру. А если вы разработчик визуализации всевозможных данных (особенно админок, менее требовательных к поддержке браузеров) – новые свойства и вовсе обязательны к изучению и применению.

Авторы думали и над дополнительным функционалам: картинками в качестве разделителей, привязке к именованным областям, а также работа с сабгридами. Возможно, позже?

Почитать ещё посты