Is there auto layout wrap "vertical first"?

[Kerstin_Stepper]

The awesome new auto layout! Thanks Figma <3
My topic: The wrap feature does always fill the available width, before adding a second row.
I’m looking for the setting how to fill the possible height first, before adding a new column.

In the screenshot you can see the fifth item will always align top right instead of below-right.

Is there a setting to choose “vertical first” instead of “horizontal first”?

Best, Kerstin

[Josh]

Would setting a max width here help?

[Josh]

Here’s an example. I’ve got the max width set to 168 which is the width of the 2 elements + spacing. Then as you add elements they wrap vertically instead of creating a 3rd column.

The preview though in the auto layout properties panel still shows it wrapping to a 3rd column. This is is just fixed icon to signify that wrapping is turned on.

Hope this helps!

[Kerstin_Stepper]

Hey,
thanks for your quick answer!

Unfortunately setting a max-width doesn’t solve it.
In my example I have max. 4 items. If I all 4 are visible, they arrange as a grid. If there’re 3 visible, the third aligns beneath; thats correct. The thing is: If there’re only 2 visible, they do align horizontally. But I want them to align vertically, filling the max available height.

[Haroll]

Hello @Kerstin_Stepper

I would not recommend to do this but it helped me when I encounter the same problem as you.
My solution was to tricks the system by rotating the auto-layout with a -90 angle and to reset the rotation parameter of the elements inside it, in order for the auto layout to fill by its height before its width

Hope it helped!

[Kerstin_Stepper]

I did a use a workaround now: using two columns – Just like before wrap feature did exist

[Kerstin_Stepper]

Next thing is:
The order is different; see in my example below.

[Kerstin_Stepper]

It’s impossible to make this item order with auto layout wrap.
Thats why I used the columns workaround.

[Haroll]

Well it’s not impossible, but it’s a trick:

1. make an auto-layout with wrap
2. rotate parent by -90deg
3. flip parent horizontally (shift+H)
4. rotate children by 0deg
5. flip children vertically (shift+V)

[Avokadomos]

Here’s an example that utilizes the same method that @Haroll mentioned:

[Greg_Huntoon1]

Yes, wanting the exact same. This example on Stackoverflow shows the request pretty well.

[Greg_Huntoon1]

@Kerstin_Stepper Have you put this in as a request?

[ange1sha]

Hello Haroll. I am implementing your solution for a component in my design system. But the width and height values are now interchanged. And this is misleading for designers, devs and PMs using or inspecting my component.
I also still want to use the spacing:Auto feature so that the nested elements can arrange themselves to fill spacing horizontally within the container as it changes width.
Achieving these is challenging. Have you come across a similar scenario?