Open
Description
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>