Auto Layout Grid - Column hug to content

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.

Here for a workaround

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

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.

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 :( 

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

Same! Without this, grid is actually unusable for my designs 😭

Same, pretty unusable without hug

Same here, needs some hugs.

HUG! HUGS! HUGS!

Feels like a huge oversight to not include it. Grids are pretty much useless until this is added. Back to making additional, unnecessary rows 😔

Can I set a row height to HUG using the new Grid feature?

I need the row to hug its content.

Implement this as soon as possible, please! I was already excited since this would tackle a very specific need in our DS – ie. dividing an autolayout non-50/50 – but the lack of vertical hug totally torpedoes it. 😑

Not yet. but we’re working on it!

Hug! 

Manually adjusting the height now, and cannot wait for hug! Would make mockups so much faster

Agreed. The ability to hug cells and the layout itself would be a huge help. Otherwise, this is great!

Adding variables to the gaps would also be great

Why release a compromised version? It’s basically useless. The flexibility of the grid is nullified by having to define a height. What’s the point in having the gap-y value in the Figma UI? The default browser behavior for grid is to hug the contents.

Adding my +1 to this!

Very bizarre to launch this without it doing what CSS grid does by default. Very limited use cases for fixed height grids.

Here for the HUGS +100

just here to pile on more deserved vitriol towards whoever decided hug wasn’t important.

Hi - just reiterating my interest in grids whose height is set to hug content, as well as being able to set variables for gap and padding.

It would be absolutely amazing if I could also set the number of columns by variable as well, so that when I change the responsive mode, I can change the number of columns as well. That would let me have 2 columns starting at tablet, 3 columns starting at desktop, etc.

This feature is completely unusable until they fix this foundational, basic function. How did this go out the door half-baked??

any workaround？