Regards the brand new AutoLayout wrapping feature announced at Config 2023.
I’m setting up a layout grid abstraction. This will be a series of slot components that our design team can replace with things like field inputs to create a form group (we have multi-column forms in our B2B platform)
Attached is an example of the issue I have in Figma.
- There are 10 slots/child nodes
- Each slot is set to Fill (W) and Hug (H)
- Each slot has a min-width value (200px in this example)
- No max width value has been set - It is not possible to define a percentage width of course
When we have a number of Slots (in this case 10), we can see that when we cannot evenly divide the number of slots by the number of columns, we could expect to see white space. Instead the child nodes on the bottom row are filling the space available to them. I can understand why, we’ve asked the child nodes to “Fill” and it’s doing just that.
However this is not the desired approach. Ideally the child nodes would not fill but maintain their width in line with the other child nodes.
Does anyone have a solution to how this might be solved for? I’m thinking maybe we need some variants of the grid component to handle certain cases, but that feels quite clunky and I was really trying to avoid complexity where possible
