ПостПродолжение предыдущего поста

Продолжение предыдущего поста Помимо базовых свойств, которые я перечислил ранее, в Chrome 149 версии были также добавлены и некоторые другие: 🐠 column-rule-inset — позволяет отступами по краям расширить или сузить полосы, разделяющие колонки 🐠 row-rule-inset — позволяет отступами по краям расширить или сузить полосы, разделяющие строки 🐠 column-rule-visibility-items — позволяет скрыть полосы, разделяющие колонки в тех местах, где отсутствуют элементы сетки 🐠 row-rule-visibility-items — позволяет скрыть полосы, разделяющие строки в тех местах, где отсутствуют элементы сетки 🐠 column-rule-break — указывает правила разрыва полос, разделяющих колонки 🐠 row-rule-break — указывает правила разрыва полос, разделяющих строки 🐠 rule-overlap — определяет, будут полосы строк отображены поверх полос колонок или наоборот Значения для column-* и row-rule-inset могут быть заданы тремя различными способами: 🐈 column-rule-inset: 10px; — отступы задаются для всех полос, разделяющих колонки 🐈 column-rule-inset: 10px 10px / 10px 10px; — первый параметр задаёт отступ верхним концам полос, которые выходят за край родительского контейнера, второй нижним, третий верхним концам, которые упираются во внутренние элементы сетки, четвёртый то же самое, но для нижних полос 🐈 column-rule-inset: 10px / 10px; — первый параметр задаёт отступы для всех полос, которые выходят за край родительского контейнера, второй для всех, которые упираются во внутренние элементы сетки column-* и row-rule-visibility-items свойства имеют значения: 🪲 normal — полосы рисуются по-разному в зависимости от контейнера (grid, flex, мультиколоночный текст) 🪲 all — полосы рисуются даже сквозь пустые области 🪲 around — полосы в пустых областях рисуются только по кругу 🪲 between — полосы в пустых областях вообще не рисуются column-* и row-rule-break свойства имеют значения: 🦊 none — полосы на части не разбиваются и упираются во внутренние элементы 🦊 normal — полосы обрезаются по краям и не упираются во внутренние элементы 🦊 intersection — все полосы прерываются в местах пересечения c другими полосами rule-overlap имеет 2 значения: 🐬 row-over-column — полосы строк отображаются поверх полос колонок 🐬 column-over-row — полосы колонок отображаются поверх полос строк ❗️За основу в примере был взят именно grid контейнер, но, как вы уже знаете, данные свойства могут быть применены и к flex и к мультиколоночному тексту, в зависимости от чего некоторые свойства могут не работать или работать по-другому. ❗️Помимо перечисленных свойств, есть ещё ряд других с точно таким же функционалом, которые в рамках поста я решил опустить 🔗 Ссылка на спецификацию ⚙️ Поддержка браузерами (column-rule-inset, row-rule-inset, column-rule-visibility-items, row-rule-visibility-items, column-rule-break, row-rule-break, rule-overlap)