Auto Layout Grid - Column hug to content

Forum|Forum|1 year ago
May 7, 2025
45 replies
4823 views

Hello! 🤠

I was very excited to see the addition of Auto Layout Grid today! Having flexibility for both Rows and Columns at the same time is a game changer.

That said, I immediately ran into not being able to set a column width to “Hug” within a table, which is a bummer. In the attached video, I want the “Audited By” column to Hug to the longest table cell content. I show both the current solution today, and what I am trying to do with Auto Layout Grid.

I can manually adjust the width of the column, I guess, but as you can see, it makes it hard to ensure correct padding without a lot of careful tuning of the width.

Anyone have any solutions? Will this be coming as a fast-follow feature? Thank you!

Grid Table - Figma Forum Question.mp4.zip

Best answer by Smith_Samuel_D

UPDATE FOR EVERYONE: Figma has added this and MORE! 🎉

The update a few days ago added Hug AND “fr” (fractional) units to grids! This makes grid AWESOME! Thank you Figma for adding these features in!

https://www.figma.com/release-notes/?title=hug-and-fractional-units-for-grid

Chris_Kerr1

New Participant

Yeah 100%, this is a major shortfall. I also got excited for this new feature.

In particular, being able to have asymmetrical layouts. For example a desktop form where the left column (1fr) contains the section header and instructions and the right column (2fr) contains the form. I can set this up, however I run into the Hug issue.

The form has conditional exposure of form inputs based on user selection, and as a result the parent container height will change. Forms often contain multiple sections this then prevents the form height from adjusting as it would in a column-based auto-layout parent container.

If anyone has a workaround for this, i’d be really interested. I should also say the idea is that I could create a UI kit component to handle this use case so that design teams don’t have to worry about it, it just works OOTB without having to craft their own layout at the project level.

Laurentiu

New Member

Here for a workaround

Marc_Robinson

New Participant

Yup! had to look this up because I wanted the autolayout to hug the height of cards that it contained, and I can’t.

Mykyta1

New Member

Same camp, was very excited about this only to find out it doesn’t work like the usual auto layout would. I have a hard time believing it was an oversight, they must have discussed it internally to make the decision for the grids to be unresponsive.

From my perspective, it could be as simple as just having a ruleset for grids to be either corresponsive with a min./max. cell height & width or fixed (as it’s working already).

Would be cool to hear from the Figma team on this.

Joey Lane

New Member

Yep. Same issue for me. Was hoping to use grid for table layouts, but since grid height cannot be set to hug it is not a viable solution :(

Joshua_Martinez1

New Member

While Figma grids are awesome, would be great if we were able to set the grid to hug the content. This way when we add an extra row it will respect the size that is set. Maybe have a button that is duplicate or new row?

Another thing that would be great is if we could use variables inside of grids