Is there auto layout wrap "vertical first"?

Would setting a max width here help?

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.

Hope this helps! 😊

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.

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!

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

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

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

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)

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

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

@Kerstin_Stepper Have you put this in as a request?

3 posts were split to a new topic: Auto layout wrap vertical option

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?