Background:

Let’s start with what is going on. Last config, Figma launched a new feature in Figma Design called Grid (Beta) which is I think an additional for the Figma Layouts. I’ve tried to look on what’s the difference between the new feature and the existing Layout Grid now Layout Guide (why would you rename existing features?) and all I could say is its the same thing, but with snapping element feature.

Auto - Layout (Vertical/Horizontal):

• A full auto-layout container has the ability to hug layers inside and adjust its dimension automatically
• In order to mimic the grid system, have to create a child container for the elements either by row or column, depending on your setup
• Adjust gaps between elements on the main container and the child containers
• Can add min and max for height or width to control column or row dimension
• Can use hug to set height and width of a specific column/row to automatic

Layout Guide (Former Layout Grid):

• Can’t adjust dimension automatically (no hugs)
• Layout guide is used to mimic the grid system using the Figma Default Layout (Freeform)
• Setting gap between element is still possible on the layout section as long as it’s tidied up
• No element snapping
• Can’t set column / row grid fraction (set columns or rows are equal)

Grid Beta:

• Can’t adjust element dimension automatically (no hugs, can only follow the boxes, one-sidedly, or set a fixed dimension)
• It’s like auto-layout without the need to create column or row containers
• Adjust gaps on the main container
• Main container automatically adjust dimension by duplicating the elements
• Elements can snap inside
• Can’t set column/row grid fraction (set columns or rows are equal)

Conclusion:

• Grid Beta is the user friendly version of layout guide (because of the snappings and automatic container adjustment, that’s why it’s an auto-layout i guess)
• Still can't set column/row grid fractions (1fr 2fr ...)
• Functions like a table (added element will snap column first then next is row + can set columns and rows from the very first)
• The closest layout to use to achieve actual table behavior is still using the default auto-layout (we can set containers for either columns or rows).

Recommendation:

• Add new props to control each row and column (this should be doable because it’s an existing CSS property)
• Maybe just create a new tool called table, can be put together with the region tools