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?

[Alexandre_Marques_Da_Silva]

Hi guys! I’m also interested in this improvement.

[Junko3]

Hey @Alexandre_Marques_Da_Silva, Thanks for sharing your idea!

It sounds like you’re suggesting a new feature. If it’s okay with you, I’d like to move your comment to the “Share an Idea” category.

This way, we can take it into consideration for future updates, and our community members can vote on your suggestion.
What do you think? Let us know!

Thanks for your help here!