Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
jav099 opened this issue Apr 15, 2025 · 0 comments
Open

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

jav099 opened this issue Apr 15, 2025 · 0 comments
Labels
css-gaps-1

Comments

@jav099
Copy link

jav099 commented Apr 15, 2025 •
edited by kbabbitt
Loading

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>

<body>
    <div class="container">
        <p></p>
        <p></p>
        <h2></h2>

        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-gaps-1
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kbabbitt @jav099