Auto Layout with Relative Size Options for columns (eg: 30%)

You can use regular stretch layout grids with constraints for this, no need for auto layout.

video source

If your layout is easily divisible in fractions like that then that’s a good solution, but if for some reason it needs to be exact, like say 31% for arguments sake, then it really would be nicer to just set a percentage number as the width.

The only and easiest way to do that that I know of is to split the sections up in frames, as wide in pixels as they are supposed to be in percent. I.e. 31% = 31px.
Set the constraints on these frames to scale and then wrap them inside a 100% (100px) frame. Then scale this frame to the supposed size and the inner frames should keep their proportion still.

I am aware of the grid but it does not do the hugging of child elements. The height cannot be changed in the component area instances. The auto layout is also overridable in instances so you could create variants with different layouts.

If you‘d want 31% you could just give 31 to the first element and 69 to the other.

That’s exactly what I said.

This could be related to the grid column you set on your document.
You could choose “auto layout” or “flexbox grid”. Once you select the element and the flexbox grid is activated, instead of fill container, or hug, you have the number of columns you want…

This would be AWESOME

+1 for this, we have a lot of components that have mixed column widths. Even with the “stretch” property set, often the items don’t truly remain aligned to the layout grid itself, they stretch based on percentage.

This feature already has >100 votes:

Let’s push it further 💪

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