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. 

Maybe this work

+1

This killed the feature completely for me :’/
Was very much hyped at first, like you. What a bait...

Sadly folks we’re asking for something that doesn’t add “shareholder value” like some fancy AI powered drawing tool that hammers peformance and makes even basic layouts take 3-4 seconds to load does.

Features and updates that users actually find useful are so far down the list or priorities for product team KPI/OCR dashboards it just wont get any attention

OK, I take it back!

Some days ago I recognised the new workspace inside figma called “Site” where you can build websites - it looks like it follows real web concepts and is aiming for building real production ready websites using the slick workflow from figma. Figma also bought Payload, which is a very well known and powerful Open Source headless CMS. This will surely be integrated into this workspace as there is a additional area “CMS” coming soon.

It’s still missing the ability to use percentage values within the size fields but I hope in the future they will completely converge with (all) web standards here. Some nice fancy and eagerly awaited features like triggering animations when a object enters the viewport, parallax, mouse parallax and much more are already there. It’s also has a media-query-like workflow.

I’m really looking forward to it!