Auto layout grid/table

[Mark23]

It would be really nice with an auto layout grid somehow so you could easily manipulate columns and rows, change alignment, add borders, backgrounds etc.

[Ayman1]

I need this so much

[XavierV]

Agree we need this. A responsive one would be nice also so it’s possible to move down item automatically.

[Matty_Vazquez]

Same here- was struggling with this the other day! I just resigned to having all the columns as the parent with the rows as children. no ideal when I needed to change a row height, but I was needing to resize the columns much more often. Meh.

[deletedlc]

Ok. I’m pointed here by Les from Figma Support team, we communicated over email, the issue I was having is that Figma currently does not support auto-layout working simultaneously with grid layout constraints, i.e. if a frame has auto-layout applied, you can still add grid layout to it, BUT elements in the frame will not behave according to the constraints you set based on the grid. It is clear in Figma official documentations that these two (or, to be more specific, Auto Layout and Constraints based on Grid Layouts) would not work together (mentioned in https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties#Constraints_and_resizing). Screenshot:

It was also mentioned in following paragraphs of the link above that “You can still apply constraints to the auto layout frame itself if it’s nested within a regular frame. The Constraints section and resizing options will appear, allowing you to set both the constraints for the Auto layout frame and the resizing behavior for any objects within it.” but this is not what I’m looking for, because what the help document described was if the outer regular frame which has grid layout applied (thus the inner auto-layout frame could be constrained to its grid layout) contains the auto-layout frame gets resized, the inner auto-layout frame would behave according to its constraints, however what I was trying to achieve is

• separated width and height control, where e.g. width follows constraints WHILE height follows auto-layout. Example: I make a card and the card has a grid layout: columnCount = 4, margin = 16, gutter = 16. In this card, I want a large text to always be 3 columns wide and spans from column 1 to 3, then there would be a small text under the large text, and the gap between large text and small text would always be 8 (sounds pretty simple right? just add an auto-layout to both texts, set direction to vertical and spacing between items to 8). To the right of the texts would be button that would always be 1 column wide, and it takes up the last column of the 4 columns. Now this is why the separated width and height would be super helpful: ideally, I want the card to automatically adjust its height depending on how long the large text is (the longer the text, the taller the text object will be, because at any given moment the text’s width is fixed since it is constrained to the columns) - this would work if width of the auto-layout containing large and small text could be constrained to column 1 and 3, large text’s width set to fill, while height of large text and the large+small text auto-layout are both set to hug.
  Or this could also work if the idea of fr in CSS grid layout works in Figma - the card would only need two columns where grid-template-columns: 3fr 1fr;.

Yeah so TLDR if only auto layouts would have grids that actually works within them…

Here’s a screenshot of instances of the card I mentioned above, and how I want them to actually look like; hopefully it does a better job than me on explaining this.