Hi!
A minor design Issue:
If we set 1px Horizontal gap on the new Flex column, and have say, three columns, one will render at 1px and the other at 2px. It makes the design Slightly inconsistent.
While on similar topic, also if top/bottom separator is added to a section, often a 1px gap is seen between the separator and the section. For now it can be solved by adding a 1px border with the same color between them.
I’ve tried this out and it looks the same on my end. It could be a browser subpixel rendering issue. It could also have to do with rounding the percentage based column width. To create the gap we’re using calc(33.33% - 1px) which I imagine in some cases could leave an extra pixel. Unfortunately there isn’t much we can do at this point to make that more intelligent.
Ideally, we would want to use this property which will pass the responsibility for the gap size directly into the CSS engine: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
This is what we’re using for the Grid element, but there isn’t enough support in other browsers yet to use it for Flexbox. We plan on making that adjustment as browsers update to support it.
Regarding the separator, I remember seeing this in the past but I’ve not seen it in a while, nor can I get it to happen now. If you know how to reproduce it consistently or have a template let me know. I’m not sure what would cause that. An alternative to the border would be using the “inset” property of the separator. You could do -1px to bump it down.