How to specify custom width percentage for Column Layouts?

Visual Editor Help
, ,
1

I would like to add Column Layout and specify percentage width OR aspect ratio for both columns e.g. 30-70,70-30,60-40,etc (3:7,7:3,6:4)

I understand that we can currently drag the bar manually to set the width, but it is not giving exact 70%. It comes close to 67%.
Plus, only a developer would know to inspect the element and know this exact percentage. I would want a visual editor with no developer background to be able to specify these widths.

Could you please recommend any solutions for the same?
Do we have to use custom component if there is no other way? If we do use custom component, is there any way to allow adding other components inside the custom component so that our custom component (e.g. 70:30 layout) still remains like a placeholder similar to Column Layout.

2

Hi there @olivela and welcome to the Builder.io forum!

This is a great question. Sometimes, columns can’t be used to handle each design you want to create, so there are other options out there!

To start, you may prefer to use the Grid Layout option. The Grid Layout option allows you to specify the width of each child box you add to it. You can check out a Fiddle where I’ve created a Grid Layout with children set to % widths, which might be what you are looking to achieve.

Please let me know if this is helpful for getting you to the layout options that you need for your design!

Thanks,
~Logan from Builder.io

1 Like