Skip to content

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

@benface

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions