Skip to main content

I was very excited to hear that grids were coming to Figma. CSS Grid was introduced years ago and brought with it many things that flexbox was incapable of doing, so I was hoping for a similar level of new capabilities here, and I genuinely cannot believe that this feature is being shipped in its current state (even as a ‘beta’). This is a very long post, but I feel like this feature has been implemented so poorly that it legitimately sows doubt in Figma’s capabilities to deliver features in the future.

  • Inability to ‘hug’ contents
    • Both rows and grids themselves are unable to resize themselves to match their contents (‘Hug”).
    • Row heights must be either “Auto” (1fr) or a fixed height, meaning that if you want your rows to be sized per their elements, you’ve now manually defined each row height in px (not even a variable value), and instead of getting a clean CSS output, now you have however many rows defined in exact values, destroying any chance of scalability.
    • This alone makes this feature nearly useless to me.
  • ‘Cannot remove row from a grid when it has content’
    • One of the great aspects of CSS grid is that, without having to do anything to the children of the grid, I can change the number of columns/rows and the grid will re-flow all the elements for me.
    • Figma does not do this. It will add rows/columns only if they are larger than current, but it will not remove rows/columns unless they are empty, so you have to manually move everything into the place you want, and then you are able to remove the extra rows/columns. This is an incredibly cumbersome way to handle this and immediately made this feature hard to use.
  • Why do I even need to define the number of rows?
    • One of my biggest gripes with Figma’s ‘Fill’ mode is that there are no percentage based widths. Say I want my items to take up 25% width, but I only have 3 items total, I now have to create an empty ‘spacer’ frame so that my design can stay responsive without manually setting pixel values
    • With grid, well now I can define my number of columns and get the nice percentage based widths I want, but I also have to define the number of rows, making it incredibly tedious, and since I can’t even set their heights automatically, I genuinely might still be better off just using horizontal auto layout with spacer frames.
  • Inability to select the elements in a row/column all at once
    • In all other areas of Figma, selecting a parent and hitting Enter will select all children. In grid, selecting a row/column and hitting enter only allows you to change the width/height, you must manually select each item one by one.
  • Table behavior
    • After I’ve manually selected each item in a row, now I’d like to create a new row, let me hit Cmd+D and...
      After I’ve manually selected each item in a row, now I’d like to create a new row, let me hit Cmd+D and...

      oh. This also happens in reverse when selecting an entire column. Tables to me seem like the most obvious use case of grid, because managing tables in Figma has been a pain for years, you either get nicely sized rows, or nicely sized columns, but now trying to use Grid for table somehow creates an even worse experience. Duplicating a row grants you more columns, and duplicating a column grants you more rows. You have to manually add the row/column first before duplication, and then it will work as expected.

I sincerely hope that some of these issues/limitations have already been addressed internally and are just not public facing yet. I’m very disappointed in this release, as Figma has had years to approach their CSS grid implementation, and they’ve provided a solution that is obnoxious to use and far too limited in scope.

 

Subject line updated by a moderator and linked to new features post on May 9, 2025 — changed from “Grid for Auto Layout is horribly limited in scope and very awkward to use” to “lConfig 2025] Grid Auto Layout Flow — let’s hear what you think!”.]

While I agree with everything aforementioned, I also think the Grid should be enabled on the instances of the components so that we could change the number of columns/rows. Use cases are: creating flexible grid-based form/table components where each cell is a swappable slot, therefore designers could adjust the number of columns and rows on the instance, without the need to create a bunch of similar components for each specific occasion, or detach..

I made a separate post about this here. Please upvote if you think this might be useful.


Adding my displeasure with the current implementation to the pile. It’s completely useless for anything that needs to be responsive in nature (so pretty much everything). I had hoped that a grid implementation could have finally solved auto layout’s shortcoming of not being able to use percentages (even if it would be considered a hack because percentages should be there regardless), but without the option to hug content it sadly doesn’t. And that’s just to try to get something functioning that should have been there years ago. There’s still all the other issues of it being the most basic, bare-bones version of grid without the extensive flexibility of what’s actually possible with it; from different units allowed to reflowing of content.

Penpot nailed it a year ago on their first attempt, yet Figma still has trouble releasing anything with even light complexity. The only reasoning I can think of is that Figma the company wants their product to be so incredibly simple to use for beginners that it forgoes usefulness for those who are more experienced and/or need power user options (even though having functional parity with things like flex or grid layout absolutely should not be considered a power user need). It seems like their only concern is to capture market share and get investment into their product (now platform I guess) so that its shortcomings don’t matter due to it being the industry standard and every company doing UX work has to use it. Even Adobe has the decency to make their products useful for beginners and professionals for all of their products even though they’re the defacto for many industries. Once again in our industry the lack of competition really hurts the consumer. And like clockwork every year after Config, I’ll say that I hope Penpot can gain some traction in the space.


It’s annoying that Figma designer’s continue shift things around. Who thought that switching places of the gap width and the alignment was a good idea? Why?

 

Totally!!! Why do you guys constantly want to move stuffs around? Do you know how muscle memory works? Do you know how annoying it is?


+1 hug

+1 variables.

 

Why ship it without those two?! Bonkers. Man I hate ‘product’ MVP thinking Just ship a complete feature people. Spend another few weeks on it. 


Also where did the wrap function go????


Also where did the wrap function go????

It’s still there, choose the horizontal direction

 


I can only agree with the posts made in this topic. When they announced this, I expected it to function more like the grids in Framer. Instead its just another function that makes Figma more confusing.


Currently to get a row or column to hug the nearest content you have to find the height or the width of the nearest frame and then manually type it where it says Auto. Please give us a hug feature. Also I would like grids to wrap so they are responsive.


Second the need for rows, columns, or the whole grid to hug content. Makes this feature pretty unusable unless you are designing a masonry grid or bento.

Even with grid, it would be nice to set percentages for widths and heights. Also being able to specify the wrap behavior for grid (i.e. no wrap, or wrap).

I have a very specific problem that percentage widths would fix, and I thought grid was going to get us close. Essentially a responsive carousel where the items take up x number of columns but then also flow off the right and left of the page. This is very simple to build in CSS, but currently pretty impossible in Figma.

Also need to be able to assign variables to all the props like other types of auto-layout.


Second the need for rows, columns, or the whole grid to hug content. Makes this feature pretty unusable unless you are designing a masonry grid or bento.

Even with grid, it would be nice to set percentages for widths and heights. Also being able to specify the wrap behavior for grid (i.e. no wrap, or wrap).

I have a very specific problem that percentage widths would fix, and I thought grid was going to get us close. Essentially a responsive carousel where the items take up x number of columns but then also flow off the right and left of the page. This is very simple to build in CSS, but currently pretty impossible in Figma.

Also need to be able to assign variables to all the props like other types of auto-layout.

Yeah, setting sizes in %, not just px in grids (and autolayout), and wrap is a must to build modern responsive web-apps and sites! And their absence is a deal-breaker, unfortunately (


I agree with a lot of these. I want to do a fairly simple thing… 

  • Use a 25 col grid and set whole columns for cards (ex: 4 col widths = 1 card width)
  • Use % of col width to set spacing in between cards ( (ex: 50% col width = space in between)

I can’t do this without resize the columns for space in between so my 25 col grid now needs 4 additional columns. If Auto Layout already has the concept of space in between, why not include this. This is how code works. 

I will keep doing this manually using the old grid presets because my devs will find this confusing and inaccurate with how code works.


I would like easier control over the grid sizing. I know what pixel width I would like my columns to be and yet I can’t easily input that width and have it automatically adjust the size of my grid columns. Also it is frustrating to drag components into a grid and have them automatically fill the space instead of remaining fixed width by default.


Define min/max widths/heights to grid elements (such as row, col, cells) in order to better manage responsiveness on a single screen instead of duplicating a page, changing grid parameters and then reorganize the content in it.

Edit: Hug Content is so much needed!!!

Advanced grid layout, where you can define breakpoints and how values of the grid are going to react once you get to that breakpoint, for example:

  • >1440px:
    • grid size: 12*8
    • padding: 48px
    • gap: 24px
  • >1024px
    • grid size: 8*8
    • padding: 24px
    • gap: 16px
  • >440px
    • grid size: 4*8
    • padding: 16px
    • gap: 12px

I agree with most of the points, I really look forward to having some sort of grouping, or allowing to organize the items. Now it’s being messy as all cell items are in the same parent, it’s especially annoying if the grid is used for tables.

 

 


Can’t add much other than I agree with most in here. As it is now the grid feature adds very little value.

 

+1 for hug, variables and min/max values.


While I want to be excited by grid finally being released, I also feel disappointed. Nothing much to add that others haven’t already mentioned.

Also not sure why grid was framed as a new ‘product’ launch. Feels slightly disingenuous to launch a half-completed feature as a new ‘product’ along side of genuinely new products (sites), almost as if it’s an attempt to pump numbers (look how many ‘products’ we launched).

That said, I can’t say I’m surprised. I kinda feel like it’s Figma’s M.O. to release half-completed long-awaited features that many users regard as ‘basic’ as a big ‘product’ launch. Wouldn’t be surprised if ‘native export of variables’ or ‘add opacity to variables’ is framed as a new ‘product’ next year.

The one positive I see is that they seem to have finally acknowledged that they’ve been adding a lot of surface area with new releases, and that they’ve been falling behind on supporting previously released features. Really hope they rebalance moving forward to support existing features and not launch 8 new ‘products’ next year.


Config 2025 release broke my designs with Grid, everywhere I used wrap autolayout!

And it could be an upgrade, if:

  1. Grid could HUG CONTENTS (row, column, grid itself)
  2. Rows, columns and cells could be resized (fixed value, %, colspan/rowspan, flex-grow value)
  3. Switch between flex wrap (items jumping to next row) and grid

I was so psyched for this feature for a long time but boy oh boy what a let down but at least we now have Buzz and Sites and no further update on the variables front or finally have the capability to use percentage based units e.g. for line-height. As someone who worked a lot with Webflow that would be a great place to start if you want to get the setup of a grid right. Sure, a tool solely for no-coding website but I really like how they resolved the usage of grid. To have a modal where you can really make detailed adjustments for the grid and not this shaky square selection (which just feels not good to use) and also where you can easily define areas inside the grid. So maybe something like a “edit grid”-mode like in Webflow could be a solution


Config 2025 release broke my designs with Grid, everywhere I used wrap autolayout!

You can still use wrap and do not use a grid if you don’t need it

 


Config 2025 release broke my designs with Grid, everywhere I used wrap autolayout!

You can still use wrap and do not use a grid if you don’t need it

 

I can’t. But super curious how you can…

EDIT: I found it. It appears when Horizontal flow is selected! Thanks a lot

 

 


I was happy when I saw the grid! And then I saw that I won't use it for any real-life scenario in my design system.

Give me a hug! ;)


I love that I’m not the only one who instantly ran into these barriers with grid. It’s great that they’ve added it, but they really need to fast follow with some, if not all, of these features


Grid has potential, but trying to use it for a table leaves much to be desired, as others have noted. Would like to the the ability add columns/rows more easily. Would like to be able to select a row or column, hit Delete and have just that column removed (instead of whole grid!) And yeah, it’s not really autolayout if it doesn’t automatically adapt to changes I make...


 

Penpot nailed it a year ago on their first attempt, yet Figma still has trouble releasing anything with even light complexity. 

I was thinking the same thing. I saw the penpot version and it’s what we should have in Figma. Just copy that, which seems to just copy CSS.

 

 


Not enough by far. Pretty disappointed. This reduced attention to your CORE product is monopolistic behavior that will make people turn away from you!

What about some more SERIOUS prototyping improvements?