[css-align] gap-fill for shared borders in flex/grid layouts #7841
Description
Edit: I nearly forgot to credit @bcdewitt for this discussion, but this is largely inspired by his direct needs moreso than mine. I just volunteered to put this proposal together for him.
Flex/Grid Shared Borders
The goal is to add a border between each cell in a flex/grid layout. This means the cell to the right and the cell to the left both share the same border between them, much like the gap property functions.
Why we can't use the solid background hack...
You could simulate a shared border by giving each cell an opaque background and the outer wrapper some other background that's visible through the gaps. The reason we can't do that, for something like the above image, is because we want the background to be shared between cells also.
Why we can't apply borders to the children...
Borders on the child elements are not shared, so they will behave a little differently. Notably, the first issue to conquer is the below result:
Most solutions depend on knowing the number of elements and viewport size ahead of time. We need it to apply to fluid and dynamic layouts. Wrapping can't be established ahead of time. This rules out:
- nth-child selectors to remove borders if necessary
- negative margin hacks
- dummy elements or pseudo elements between each list item
The closest (imperfect) workaround I've found thus far is to divide the border width in half and apply to both the container and its children, but this comes with its own limitations. Namely:
- lack of control over the layout from the parent
- outer borders are a forced decision. (There are cases where we would want dividers between the layout, but not around the outside, or otherwise distinguish them.)
.parent {
--border-color: black;
--border-width: 0.5em;
--half-border: calc(var(--border-width) / 2);
border: var(--half-border) solid var(--border-color);
display: flex;
flex-wrap: wrap;
}
.child {
border: var(--half-border) solid var(--border-color);
flex-grow: 1;
}What I might propose is a gap-fill property.
When highlighting the layout from the devtools in Chrome, the gap gets filled to visually represent the property's effect. This makes me wonder whether there may already be some existing function for this to easily happen, under the hood.
This could look something like:
row-gap-fill: black;
column-gap-fill: black;or shorthand:
gap-fill: black;So, to achieve the result in the first image, perhaps the styles would look more like this:
.parent {
--border-color: black;
--border-width: 0.5em;
border: var(--border-width) solid var(--border-color);
display: flex;
flex-wrap: wrap;
gap: var(--border-width);
gap-fill: var(--border-color);
}Link to spec: https://w3c.github.io/csswg-drafts/css-align-3/#gap-shorthand