Skip to main content

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

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.

CleanShot 2023-07-25 at 14.27.58@2x


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! 😊

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.

Bildschirmfoto 2023-07-26 um 10.35.15

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 😉

Bildschirmfoto 2023-07-26 um 10.55.15

Next thing is:

The order is different; see in my example below.

Bildschirmfoto 2023-07-26 um 11.00.00

It’s impossible to make this item order with auto layout wrap.

Thats why I used the columns workaround.


Bildschirmfoto 2023-07-26 um 11.01.58

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)


image

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?

Reply


Terms & ConditionsCookie settings