Is there auto layout wrap "vertical first"?

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.
Bildschirmfoto 2023-07-25 um 12.17.16
Is there a setting to choose “vertical first” instead of “horizontal first”?

Best, Kerstin

1 Like

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.

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! :blush:

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.

1 Like

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 :wink:

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?