How to Scale Buttons along with Panel?

[anilsayar]

Hello,

I would like to place four buttons on a panel object and scale the buttons in different resolutions, if necessary. For this reason, I added four buttons under Panel object at Hierarchy (see image 1) and then added panel object Aspect Ratio Fitter and Grid Layout Group components (see image 2). I set my Canvas Scaler to Scale with Screen Size at 1366 x 768. So, everything looks well in the 3rd image. However, when I change the resolutions, button corners don’t align properly (see image 4). I cannot add buttons Aspect Ratio Fitter component, because Grid Layout Group at panel object overrides on it. Are there any solutions for this?

Thanks

Image 1:

Image 2:

Image 3:

Image 4:

[irene_reko]

The GridLayout only supports fixed cell sizes. But Horizontal and Vertical Layout Groups support children with adaptable sizes.
The hierarchy like this should work:

• Horizontal Layout Group
• Vertical Layout Group
• Button 1
• Button 2
• Vertical Layout Group
• Button 3
• Button 4

I would enable “Control Size Child” and “Child Force Expand” on the horizontal layout and only “Child Force Expand” on the vertical layout. But depending on what you want to achieve, another configuration might work as well.