[csswg-drafts] [css-align] gap-fill for shared borders in flex/grid layouts (#7841)

jonathandewitt-dev has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-align] gap-fill for shared borders in flex/grid layouts ==
# 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.

![image](https://user-images.githubusercontent.com/55965128/194362515-6bafbbf4-dd1c-4595-a992-5caec609fe3c.png)

## 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:

![image](https://user-images.githubusercontent.com/55965128/194362422-5dc85230-8773-4da6-a263-eb4fa25a60b0.png)

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 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:
1. lack of control over the layout from the parent
2. 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.)

```css
.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.

![image](https://user-images.githubusercontent.com/55965128/194366349-4b7b9bb4-ece0-4028-8105-0a0cb10ba581.png)

This could look something like:
```css
row-gap-fill: black;
column-gap-fill: black;
```
or shorthand:
```css
gap-fill: black;
```

So, to achieve the result in the first image, perhaps the styles would look more like this:

```css
.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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7841 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 6 October 2022 16:41:05 UTC