Panel and layout groups in Unity

Introduction

Panels and layout groups help organize UI elements neatly on the screen. They make your interface look clean and adjust automatically when things change.

You want to arrange buttons vertically or horizontally without manually setting each position.

You need a container that holds multiple UI elements and adjusts their size and spacing automatically.

You want to create a menu or panel that resizes nicely on different screen sizes.

You want to group UI elements so they move together when the panel moves.

You want to add padding or spacing between UI elements easily.

Syntax

Unity

1. Create a Panel: GameObject > UI > Panel
2. Add a Layout Group component to the Panel (e.g., Vertical Layout Group, Horizontal Layout Group, Grid Layout Group)
3. Add UI elements as children of the Panel
4. Configure the Layout Group properties like spacing, padding, child alignment

Panels are UI containers that hold other UI elements.

Layout Groups automatically arrange child elements based on chosen layout style.

Examples

This arranges buttons vertically with 10 units space between them.

Unity

GameObject > UI > Panel
Add Vertical Layout Group component
Set spacing to 10
Add Buttons as children

This arranges images horizontally centered inside the panel.

Unity

GameObject > UI > Panel
Add Horizontal Layout Group component
Set child alignment to Middle Center
Add Images as children

This arranges elements in a grid with fixed cell size and spacing.

Unity

GameObject > UI > Panel
Add Grid Layout Group component
Set cell size to (100, 100)
Set spacing to (5, 5)
Add UI elements as children

Sample Program

This script creates a Canvas, then a Panel with a Vertical Layout Group. It adds three buttons inside the panel. The buttons are arranged vertically with spacing and padding automatically applied.

Unity

using UnityEngine;
using UnityEngine.UI;

public class PanelLayoutExample : MonoBehaviour
{
    void Start()
    {
        // Create a Canvas
        var canvasGO = new GameObject("Canvas", typeof(Canvas), typeof(CanvasScaler), typeof(GraphicRaycaster));
        var canvas = canvasGO.GetComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;

        // Create a Panel
        var panelGO = new GameObject("Panel", typeof(RectTransform), typeof(Image), typeof(VerticalLayoutGroup));
        panelGO.transform.SetParent(canvasGO.transform, false);

        var panelRect = panelGO.GetComponent<RectTransform>();
        panelRect.sizeDelta = new Vector2(300, 400);
        panelRect.anchoredPosition = Vector2.zero;

        var panelImage = panelGO.GetComponent<Image>();
        panelImage.color = new Color(0.8f, 0.8f, 0.8f, 0.5f); // light gray transparent

        var layoutGroup = panelGO.GetComponent<VerticalLayoutGroup>();
        layoutGroup.spacing = 10;
        layoutGroup.padding = new RectOffset(10, 10, 10, 10);
        layoutGroup.childAlignment = TextAnchor.UpperCenter;

        // Create 3 Buttons as children
        for (int i = 1; i <= 3; i++)
        {
            var buttonGO = new GameObject($"Button{i}", typeof(RectTransform), typeof(Button), typeof(Image));
            buttonGO.transform.SetParent(panelGO.transform, false);

            var buttonRect = buttonGO.GetComponent<RectTransform>();
            buttonRect.sizeDelta = new Vector2(260, 60);

            var buttonImage = buttonGO.GetComponent<Image>();
            buttonImage.color = new Color(0.2f, 0.5f, 0.8f, 1f); // blue

            var button = buttonGO.GetComponent<Button>();

            // Add Text to Button
            var textGO = new GameObject("Text", typeof(RectTransform), typeof(Text));
            textGO.transform.SetParent(buttonGO.transform, false);
            var text = textGO.GetComponent<Text>();
            text.text = $"Button {i}";
            text.alignment = TextAnchor.MiddleCenter;
            text.color = Color.white;
            text.font = Resources.GetBuiltinResource<Font>("Arial.ttf");
            text.rectTransform.sizeDelta = buttonRect.sizeDelta;
        }
    }
}

Important Notes

Always add UI elements as children of the panel with layout group to let it control their positions.

Use padding and spacing in layout groups to create space around and between elements.

Panels with layout groups help your UI adapt to different screen sizes automatically.

Summary

Panels are containers for UI elements.

Layout groups arrange child elements automatically in vertical, horizontal, or grid style.

Using panels and layout groups makes UI design easier and responsive.