Skip to content

[css-gaps-1] Gap intersection point definition might need updating for multi-col #12084

Open
@jav099

Description

@jav099

Right now we have defined gap intersection points here. However, we might want to expand this such that in multicol containers, we also have an intersection point where a gap meets a spanner.

For instance in https://jsbin.com/welojoheko/edit?html,output, we can observe that currently we are not painting behind the spanner (cyan) when painting the column rules, so we might want to add intersections where the gaps meet the spanner, so we can implement this behavior as well as our different rule-breaks. I should note too, that for the purpose of outset we might also want to treat these intersections as if they were intersections with the edge of the container, rather than intersections with other gaps.

`<style>
body {
margin: 0px;
}

.container {
    border: 2px solid rgb(96 139 168);
    width: 200px;
    height: 200px;
    column-height: 60px;
    column-gap: 10px;
    row-gap: 10px;
    column-rule-width: 10px;
    column-rule-style: solid;
    column-rule-color: blue;
    row-rule-width: 10px;
    row-rule-style: solid;
    row-rule-color: gold;
    column-wrap: wrap;
    column-width: 60px;
    column-count: 3;
    column-fill: auto;
}

p {
    background: rgb(96 139 168 / 0.2);
    height: 60px;
    margin: 0px;
}

h2 {
    column-span: all;
    background-color: cyan;
    color: #fff;
    margin: 0px;
    opacity: 0.5;
    height:18px;
}
</style>

    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
`

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