Auto layout grid/table

I need this so much

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

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.

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:

• 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.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.