You wanted a vertical line between two flex items and reached for column-rule. It did nothing. Because until now, column-rule only worked inside a multi-column layout. For grid and flex you either put a border on every child and hoped the last one behaved, or you filled the gutter with a pseudo-element and prayed the tracks did not resize.
That workaround is done. In a piece dated August 3 on CSS-Tricks, Sam Davis Omekarajr writes up CSS gap decorations, now available in Chrome and Edge starting with version 149, plus the other Chromium-based browsers on the same version. The property you already know grew up. And it brought a partner.
column-rule crosses over, row-rule joins
column-rule still paints a line in the column-axis gap. What changed is where it applies. Multi-column, grid, flex — same property, one syntax. row-rule handles the other axis. A grid with gap: 3rem and both properties set draws a cross-hatch of lines through the gutters, no children touched.
The other thing to keep in your head: row-rule and column-rule accept a list. One rule per axis is the default. You can stack or repeat.
