When testing out the new grid inside components, I noticed that there is no option to hug the content vertically. We use instance swaps in things like footer for our designers and it’s not ideal for them to have to manually resize. Would be great if this new feature hugged, otherwise we can’t really use it in a lot of our components in our design system we thought it would be good for.
New - Grid and Hugging Content Vertically
I’ve ran into the same issue. I was so excited to finally get a grid functionality, but it’s still miles away from the actual `display: grid` in CSS.
In CSS, you can define `grid-template-rows` to have values like `auto` (automatically resize to fit children’s height) or fractional units like `1fr 4fr`, which would tell the grid to have the 2nd row four times taller than the first.
The current functionality of grid in Figma is so lacking that I’m still forced to use nested flexboxes or wrapping.
One of the first bummers I've noticed aswell if I’m not missing something.
I thought we would now be able to create resizable components in other layouts than 50:50.
Like the following component consisting of an image with a locked aspect ratio and some text aside in a two-third / one-third layout. Unfortunately its height does not hug and I would also expect to be able to set the alignment to centred.
Yup, this is something I also found basically instantly. I understand grid is in beta, so it’s fine. Would just love to see hugging capabilities is a (near) future update
I’ve ran into the same issue. I was so excited to finally get a grid functionality, but it’s still miles away from the actual `display: grid` in CSS.
In CSS, you can define `grid-template-rows` to have values like `auto` (automatically resize to fit children’s height) or fractional units like `1fr 4fr`, which would tell the grid to have the 2nd row four times taller than the first.
The current functionality of grid in Figma is so lacking that I’m still forced to use nested flexboxes or wrapping.
This. I imagined grids would work like they do in CSS and finally replace the need for nested auto-layout frames in Figma. Rows and columns should accept hug and min/max values, without it we’re left fidgeting with the numbers or simply continue using nested frames to handle layout grids.
I hope this makes it in the next update 🤞🏼
I’ve ran into the same issue.
The new grid function is so bad and is worse than the previous verison.
Bumping this, I feel vertical hugging is really important!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.