Not understanding why it needs to be ‘wrap’ and not just replace row/col with a grid. That is going to be the most similar behavior to Flex, Grid, and old skool Block Floats. Maybe just a simple ‘x cols’ option to help lock it or set to col vs row.

All the other features to wrangle the items are there: alignment, width + height control, gap (maybe make this h vs. v as well), padding, etc. As someone who prototypes in code often, this would be a welcome change.

Hey David,

I think just having only a grid option will not resolve the most painful point of creating layouts, responsiveness. Even Flex and Grid have a wrap function and this makes things much easier to create layouts. Just having a grid will still result in the same thing we are doing now, changing the settings of the auto layout to achieve a new layout, similar to creating breakpoints in css. Imagine just setting things to wrap and then copying the frame and just adjusting the width, this will result in most of the work done. You will have to adjust just some parts or maybe none to have the final layout.

@Mihai_Marcu

They essentially do the same. But keeping the row/col buttons for flow is a valid point for sure. Though it still doesn’t solve the nuanced control of responsive design and setting columns at breakpoints.

Yeah you can rely on the width of the item either in the style of inline blocks, auto flex blocks, or perhaps set percentages. But you can’t guarantee column width or determine say a 4-col for desktop, 2-col tablet, 1-col mobile. You could add min-max widths ala css grid to the width/height settings to keep inputs few.

But it is a narrow line between simplifying flexbox in Figma vs. just building in code.

@David_Balogh I wasn’t saying it is perfect, and I think nobody expects to have the wrap solve every use case, but it still makes things easier to work with. I was trying to highlight that now if you need a 2 by 2 grid, you need one frame to have the 2 rows each with the columns inside. This results in the need to change the settings of the contained rows to use “column” orientation to achieve a 1 column layout. This is basically the same situation as using a grid option, and you still need to change the settings to have the layout become from 2x2 to 1x4. If the wrap option were available, you could have only one container frame and its 4 children. Each child should have a min-width, let’s say, 343px and a max-width of 560px. With the wrap option enabled, the wanted change happens without changing the container’s settings. And as I said at the start, this will only solve some use cases; we will still need to change some things manually, but it would only be some elements.

Woohooo! Thanks for hearing us Figma!

Hi all!

If you want to try an early version of the wrapping feature, you can duplicate my file at this link:

If you have early access can you tell if we will get also min and max width and height? 🙃

You can get an answer to your question in this thread: Min and Max Width for Auto Layout.

Are you referring to this comment Min and Max Width for Auto Layout - #78 by AlicePackard or to the “0 height frame hack”?

@tank666, I’m getting a 404 with the community file link you shared! Would love to get in there and explore 🙏

Unfortunately, the Figma team has removed the file from the community. So please wait for the official release of this feature.

ah darn, well I appreciate you trying to make it available! excited for this to officially launch.

I am daydreaming - Figma as a new auto layout upgrade. This lets you create a matrix ie auto layout responsive. Now I can build design with smart auto layout based on the content, no more nested auto layouts.

Yeah, I am dreaming but it’s worth thought.

I think you’re looking for a flex wrap or display: grid in css

It’s similar to this idea

Looks like Figma is working on it and might be released (soon we hope 🙂 )

Hi all,

Thank you for noticing it @Stephane_Popout ! I merged the topic so we can gather the overall interest in the same place. 🙂

This is how penpot does it. When is this coming to figma?

Seems like we can pretty much forget about Figma’s growth at this point.

This is corporate speak for “we bought an shelved our competition and we don’t care about their users”

“Adobe’s greatness has been rooted in our ability to create new categories and deliver cutting-edge technologies through organic innovation and inorganic acquisitions,” said Shantanu Narayen, chairman and CEO, Adobe. “The combination of Adobe and Figma is transformational and will accelerate our vision for collaborative creativity.”

Please we need this!

I think, this is the time to launch it. come-on @figma team! Just do it!

Making Auto layout closer to CSS Flexbox (or even adding a CSS Grid option 🫢 ) is very much needed! Would greatly improve dev. handoff too!

They actually did it! I just found this thread yesterday 🥹

Well shut my mouth! They finally did it and so much more.

I do have a question about the new AutoLayout wrapping I’m hoping to get some help on… reposting here given the size and popularity of this thread 🙂

Really excited about this. I’m wondering if it’s possible to control the width of a frame based on how many elements are active? For example. If I have 3, 5 or 6 items, I need a column of 3. 2 or 4 items I need 2 columns. Any body have a suggestion?

How about wrap-reverse? Can I do this?