A symmetric version of divide-x and divide-y

[akriegman]

If you have some blocks with no margins between them and you naively give them outlines or borders, then the borders will be doubled on the shared edges. There's a lot of possible solutions to this problem, see this codepen linked from this reddit discussion for a few possible solutions.

Tailwind provides divide-x and divide-y for this situation. The problem with these is that they're asymmetric. They put the border inside the box that comes first in render order. This is unnoticeable for 1px borders, and that's all I'm using, and if I had any sense of what's important I would move on with my life. But we can do better.

One option is this:

.divide {
  gap: 1px;

  & > * {
    outline: 1px;
  }
}

(that's meant to be an "all immediate children" selector, I hope I got that right.) This would ofc only work with flex and grid blocks.

I would also suggest that we modify divide-x to use outline-inline-end, but that doesn't exist. We could still make things symmetric with negative margins maybe:

.divide-x {
  & > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: 1px;
    margin-inline-end: -1px;
  }
}

so that the shared border is inside both boxes. idk I haven't tested that though.

Anyways, I'm more serious about the divide proposal than the modification of divide-x. I guess we can already achieve the same thing with just gap and outline, so maybe there's no point to this.