I would very much like a feature to maintain the same width of items in an Autolayout with wrap - even when they are dynamic using “Filled”
Ex.
i have 3 items in autolayout with wrap on.
Width is set to Filled
Max width for items are 200
Min width for items are 100
My autolayout width is 300
= all items are on the same row
I change autolayout width to 200
= items in 1st row are now 100px wide,
Item 3 is pushed to a new row, but stays 100px wide
This is a great idea an overview of how it could be implemented. Figma design team, please implement this soon! It would be immensely useful to me
And the same height with the tollest in a row! Both features are mustHave for adaptive site autolayout!
Yes please! CSS does it
Yes, for instance, Figma could allow us to apply the width of the objects that are in the first row, to all other items in subsequent rows.
Until this perhaps gets solved, here is a workaround which may or may not work depending on your situation:
Add more items to your grid: add as many as the maximum amount of items you expect to see in a single row when the grid is at its “widest”
For me, my grid could be 1920 wide in the largest designs, the items in it have a min width of 100 and a max width of 150, their width are set to ‘fill’. This gives at most 14 items per row. So, I would add 14 ‘placeholders’ extra.
Give these placeholders a height of 0px (add lots of '0’s in the height tab to ‘force’ it) and a 0% transparency.
This will result in all your visible items being the same width as your resize the grid, and only the invisible placeholders will have a width discrpency without affecting your designs.
Until this perhaps gets solved, here is a workaround which may or may not work depending on your situation:
Add more items to your grid: add as many as the maximum amount of items you expect to see in a single row when the grid is at its “widest”
For me, my grid could be 1920 wide in the largest designs, the items in it have a min width of 100 and a max width of 150, their width are set to ‘fill’. This gives at most 14 items per row. So, I would add 14 ‘placeholders’ extra.
Give these placeholders a height of 0px (add lots of '0’s in the height tab to ‘force’ it) and a 0% transparency.
This will result in all your visible items being the same width as your resize the grid, and only the invisible placeholders will have a width discrpency without affecting your designs.
This was genius! Gets exactly what I was hoping for! I’ve been adding things and hiding them but I didn’t think about the 0px height! Live saver.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
