Skip to main content

Limit number of Items in "auto layout" when using Wrap


Mortyakard

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:

17 replies

Josh
  • Former Community Manager
  • 1019 replies
  • July 26, 2023

You can sort of achieve this by applying a max width and height and then setting the auto layout frame to clip content.


Mortyakard
  • Author
  • New Member
  • 4 replies
  • July 26, 2023

@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


XavierV
  • 26 replies
  • August 24, 2023

Yes ! we need that of course !


Dennis_N
  • Power Member
  • 181 replies
  • September 26, 2023

+1
I stumbled over this issue today aswell. This feature would be super helpful.


Alden_Tan
  • 1 reply
  • September 29, 2023

+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)


Susanne_Opsvik

+1 to this.

I am struggling with the same issue. This is a feature which would be very useful!


Susanne_Opsvik

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:


Jan_Kopriva_BSSHOP_s.r.o

It would be great!!!


Dennis_N
  • Power Member
  • 181 replies
  • January 11, 2024

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?


Amadeusz_Wasik

As a trick, I’m using min/max + empty frames as fillers. Working as a charm.

Here you got the example: https://www.figma.com/design/DX7T8nkAhxPOtw0iTEsucp/Auto-layout---wrap-cheat?node-id=0%3A1&t=4AXLHQxMin2BLtlz-1


Ashley15
  • 3 replies
  • July 20, 2024

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?


Amadeusz_Wasik

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.


Ashley15
  • 3 replies
  • August 8, 2024

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


Marie_Rang
  • 9 replies
  • September 25, 2024

Yes!! +10000 to this, it’s ridiculous we haven’t gotten it yet. This and vertical wrap!


Glenn_Cahill1

@Figma please make this a feature. It would be so helpful!


Finn_Lynch1
  • New Member
  • 3 replies
  • December 5, 2024

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


Ashlee_Williams

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. 🤷


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings