I need to limit the number of items when using Wrap on Auto Layout.
Like the number of columns or rows on grids.
I want to use wrap auto layout and auto-fill on inner items at the same time and I want to set a limit for the number of columns or rows.
Look at these images, I designed that thing I meant.
Additional:
I don’t want to use max/min width, because these happen:
You can sort of achieve this by applying a max width and height and then setting the auto layout frame to clip content.
@Josh Thanks Josh,
Yeah, I knew it can possible in this way, but it takes time to do and sometimes I don’t want to set max width and height for the components.
and this way have a problem in some situations, please look at this image:
First row get 4 items
second row get 3 items and different sizes
Yes ! we need that of course !
+1
I stumbled over this issue today aswell. This feature would be super helpful.
+1 to this. Defining a max width for the entire row is not useful as I also can’t control the number of items in a row (e.g. I want to display max 4 cards in a row, but 5 cards may be displayed if the individual card widths still allow for 5 to be displayed within the max defined row width)
+1 to this.
I am struggling with the same issue. This is a feature which would be very useful!
Not sure wether i would prefer a “max number of items” or rather have to possibility to turn on “same width” controll in autolayout. Like this:
Hm, how does Figma know the max. number of items each row should have if the items are set to “fill” but there is no field to define the max number of items?
This works so good if the layout is left aligned, but do you have any tips for a centre aligned logo grid with an odd amount?
That’s a tricky one…for 4 items in the top rows and 2 in the last one, you can go with filler/logo/logo/filler? Something like that, nothing else coming into my mind.
For non-aligned numbers like when you have 4 items in top rows and 3 in the last, I think it is impossible to keep it perfectly.
Yeah the 4 first row and 3 second row is difficult, at this point ive just not used fill or hug and used fixed. It’s not responsive but less messy
Yes!! +10000 to this, it’s ridiculous we haven’t gotten it yet. This and vertical wrap!
@Figma please make this a feature. It would be so helpful!
+1 Absolutely need this, it keeps coming up for me and I have to find clever ways to solve in my components (like adding “blank” space to keep the column alignment when I resize). Vertical wrap would also be very useful!
Another vote for this! I rarely use the wrap feature because it requires me to know in advance:
- How many columns/objects I want to have in a row
- Determine and define the max width of each object in the row
- Redo the second bullet any time I change the amount of items I have in a row
Which is annoying to do over and over again if I’m still playing with the layout and trying to figure out what works.
What I’d prefer to do is be able to set each object in the row to “fill,” THEN tell wrap the number of columns/objects I want in each row, at which point it would make the adjustment automatically.
As-is, I just do it the old fashioned way: create a frame for each row with the contents set to fill and duplicate it as needed. 🤷