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”?
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!
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.
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:
- make an auto-layout with wrap
- rotate parent by -90deg
- flip parent horizontally (shift+H)
- rotate children by 0deg
- 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?