New Autolayout Wrap question

Ask the community
1

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

columns
columns2482×3140 39 KB

1 Like
2

Hi Chris!
Auto layout is based on CSS flexbox, which does not support Fill-width objects that maintain the size of siblings on different rows.
If you have a fixed number of columns, try removing auto layout and use layout grid + constraints instead (https://help.figma.com/hc/en-us/articles/360039957934#Stretch_Layout_Grids)

1 Like
3

Wouldn’t it be flex-grow:0 ?

4

I believe flex-grow:0 will stop all children from growing, which is the equivalent of setting them all as fixed width.

5

Did anyone ever come up with a solution for this?