Небольшое предисловие. В CSS есть Multi-Columns Layout. Это возможность разбить текст внутри элемента на несколько колонок (фрагментов по умному) и управлять их поведением. Многие об этом не знают, потому что подобные задачи встречаются не часто. В основном это нужно в сфере типографии. Но иногда и при вёрстке сайтов можно применить.
У мульти-колонок есть свойство
column-gap для управления отступами между колонками. Впервые свойство появилось именно в мульти-колонках и потом уже было использовано во флексах и гридах в паре с row-gap и сокращённым свойством gap.Ещё у мульти-колонок есть возможность отображения линий между колонками. Делается это при помощи свойства column-rule. Его синтаксис такой же, как у
border: толщина, тип и цвет. Рисуется вертикальная линия между колонками, на тех местах, где находятся отступы.А почему бы не сделать такую возможность во флексах и гридах? Я, например, сталкивался с ситуациями, когда это было нужно. Приходилось что-то придумывать. Об этом подумали в команде Edge и выкатили эксплейнер с предложениями по линиям между флекс-элементами и ячейками грида.
В предложении не просто описана возможность добавления линий, а предусмотрены различные сценарии применения. Вертикальные и горизонтальные линии, разные стили, чередование, пересечение, смещение, перекрытие и ещё много чего. Всё рассказать сложно, проще посмотреть на иллюстрации и примеры кода.