Set grid row height to "hug" contents

I’ve ran into the same issue. 

The new grid function is so bad and is worse than the previous verison.

Figma Grid is missing the option to input a variable in the gap field:

 

We need to be able to give this parameter a Token.

Hi ​@Tiziano,

Thanks so much for reaching out and for taking the time to explore our newly released Grid. We’re excited to see your early engagement and value your feedback.

Our Engineering team has reviewed this closely and confirmed that the behavior you’re seeing is a known issue. The good news is that it’s already on our radar and has been prioritized as future release. 

I’ve also personally shared your feedback directly with our Product and Engineering teams for future improvements. So, let me change the category into “Suggest a feature”.

We’ll keep you updated as we make progress and will share more details as soon as they become available. In the meantime, feel free to reach out if there’s anything else I can support you with.

Thanks again,

Toku

this is definitely a tablestake that should have shipped

Adding my +1 for this. Until it supports hug it’s not really a useful feature.

They should just add the ability to set Coloumns and Rows in an Auto-layout and then we would be happy :) - oh and percentage bases padding/margin and gaps 😁

Grids are so lame and also that it defaults to grids when you add auto-layout to some older designs that are not in an autolayout.

I really cannot understand how this feature went out, beta or not, without this. There is virtually no practical use without it. 

Still no update on this? Really bummed…

it was stupid to add this half feature 

I couldn’t agree more – the lack of Hug Contents and variables for grid gaps are complete deal-breakers for me. I was really hoping grid layout was the solution to the frustration of auto-layout not honoring the layout guide (the artist formerly known as layout grid). I’ve a component currently in production which can’t be faithfully recreated in Figma because of these issues. Perhaps I expect too much from Figma, but if I can open up an inspect panel in Figma like any other browser, I would also like to believe true CSS responsive grid layout would be possible.

I find my way

https://www.figma.com/community/file/1523144515105411077/auto-layout-grid-hug-content-trick
 

just tested and effectively there is no grid, without auto hugging to contents it’s useless

I get it’s beta, but it’s not even usable at all. Wasted like 15 mins trying to find a workaround.

Just tried in Penpot and went flawless pretty much.

The only thing that’s holding me from switching to them is the community which is still growing, and their rendering is still slow at times on my laptop.

I feel penpot could overtake figma if they aren’t careful, feels like figma are concentrating on other products right now (sites, buzz, draw etc), eye off the ball maybe? There are a lot of ideas on the ‘backlog’ that have been sat there for years now that should already be part of Figma.

Just adding on to this! I need a ‘hug’ setting for row heights! seems like a obvious this and I’m assuming ya’ll are working on it? :D please please please!

​@Junko3 do you know if this is being worked on? It looks like Penpot already does this perfectly… :/ 

This and the ability to set them to %…  Figma really needs to a streamlined way to set hug - fill size percentages %, min - max and all those things you do in a real web app. 
It’s such a pain to hack your way into telling a developer we want this to be 8VW with min width 44px and max width 120px. Or give us a command line so we can set our own CSS on objects. 

wish they’d stop shoving AI garbage that literally no one wants into the app and spend some time fixing stuff like this instead.

yepppppp penpot is honestly what i use for my own personal design work now because figma is just on another planet from what designers actually need.

Seems like there a way to create rows and columns that hug content. Here is how you can do it

1. Create a frame
2. Hit Shift+A, make it auto layout frame, make sure that sizing is set to HUG both directions
3. Convert it to grid
4. Now you have 2x2 grid with auto sized rows and cols

There is no direct way to enable this sizing option within the UI, however if you add a layer inside and then you duplicate it it would add another column with “Hug” sizing enabled

 

Not quite clear how to add more rows though...

Seems like there a way to create rows and columns that hug content. Here is how you can do it

1. Create a frame
2. Hit Shift+A, make it auto layout frame, make sure that sizing is set to HUG both directions
3. Convert it to grid
4. Now you have 2x2 grid with auto sized rows and cols

There is no direct way to enable this sizing option within the UI, however if you add a layer inside and then you duplicate it it would add another column with “Hug” sizing enabled

 

Not quite clear how to add more rows though...

Clever trick! Sadly, additional rows/cols initialize as “Auto”. I guess it’s a sign that it’s possible, but maybe it’s just not fully implemented yet.

fwiw, I’m able to tweak the grid configuration through the plugin API, to apply various layouts that aren’t yet available via the Figma UI.  However, it requires setting configuration options that aren’t yet documented in the plugin API.  This gives me hope that this feature is coming sooner than we expect.

Seems like there a way to create rows and columns that hug content. Here is how you can do it

1. Create a frame
2. Hit Shift+A, make it auto layout frame, make sure that sizing is set to HUG both directions
3. Convert it to grid
4. Now you have 2x2 grid with auto sized rows and cols

There is no direct way to enable this sizing option within the UI, however if you add a layer inside and then you duplicate it it would add another column with “Hug” sizing enabled

 

Not quite clear how to add more rows though...

Clever trick! Sadly, additional rows/cols initialize as “Auto”. I guess it’s a sign that it’s possible, but maybe it’s just not fully implemented yet.

Duplicating frames inside the grid would create extra columns and rows with “Hug” sizing inherited. This is the only way I found yet. 

Without hug content, grids are not of much use.