[css-flexbox][css-grid] Proposal: make column-rule work in Flex and Grid layout + add row-rule and rule, like for gap

[benface]

Right now, if you want a border/line between Flex items or Grid cells, you need hacks like * + * { border-top: 1px solid #ccc; } or more complex to handle multiple rows and columns together. These hacks fall apart very quickly, for instance if the first item has display: none. It would be nice to add a property explicitly for this, and there is one that currently works in multi-column layout: column-rule. Note that the related property column-gap already works in Flex and Grid, along with row-gap and the gap shorthand. I propose adding row-rule and rule as well.

[SebastianZ]

Thank you for bringing that up! Note that rules and more advanced gap decorations for Flexbox, Grid and also Table layout are already discussed in #2748 and #6748.

Gap decorations were also discussed again at a face-to-face meeting back in July. There it was decided to break the feature down to basically what you are suggesting (and leave the rest of the features suggested in the other issues for later improvements).

I'll try to find the time to summarize what was discussed back then and write up a full proposal for that. So it can finally be turned into a specification.

Sebastian

[benface]

Hey @SebastianZ, any news? This would be a super useful addition to CSS.

[benface]

Closing, since there is a whole Editor's Draft spec now! 🎉