How to Use Layout Group in Unity for UI Organization

In Unity, use Layout Group components like HorizontalLayoutGroup, VerticalLayoutGroup, or GridLayoutGroup to automatically arrange UI elements inside a parent container. Attach one of these components to a GameObject with a RectTransform, and child UI elements will be positioned and sized based on the layout rules.

Syntax

Unity provides three main layout group components to organize UI elements:

• HorizontalLayoutGroup: Arranges children in a row.
• VerticalLayoutGroup: Arranges children in a column.
• GridLayoutGroup: Arranges children in a grid with rows and columns.

Each layout group is a component you add to a parent GameObject with a RectTransform. You can customize spacing, padding, child alignment, and child control options.

csharp

public class LayoutGroupUsage : MonoBehaviour
{
    // Attach HorizontalLayoutGroup, VerticalLayoutGroup, or GridLayoutGroup
    // to a GameObject with RectTransform in the Unity Editor.
}

Example

This example shows how to create a vertical layout group in code and add buttons as children. The buttons will be stacked vertically with spacing.

csharp

using UnityEngine;
using UnityEngine.UI;

public class VerticalLayoutExample : MonoBehaviour
{
    void Start()
    {
        // Create a new GameObject for the layout
        GameObject layoutGO = new GameObject("VerticalLayout", typeof(RectTransform));
        layoutGO.transform.SetParent(this.transform, false);

        // Add VerticalLayoutGroup component
        VerticalLayoutGroup layoutGroup = layoutGO.AddComponent<VerticalLayoutGroup>();
        layoutGroup.spacing = 10f;
        layoutGroup.padding = new RectOffset(5, 5, 5, 5);
        layoutGroup.childControlHeight = true;
        layoutGroup.childControlWidth = true;

        // Add ContentSizeFitter to resize parent to children
        ContentSizeFitter fitter = layoutGO.AddComponent<ContentSizeFitter>();
        fitter.verticalFit = ContentSizeFitter.FitMode.PreferredSize;
        fitter.horizontalFit = ContentSizeFitter.FitMode.PreferredSize;

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

            // Set button text
            GameObject textGO = new GameObject("Text", typeof(RectTransform), typeof(Text));
            textGO.transform.SetParent(buttonGO.transform, false);
            Text text = textGO.GetComponent<Text>();
            text.text = "Button " + i;
            text.alignment = TextAnchor.MiddleCenter;
            text.color = Color.black;
            text.font = Resources.GetBuiltinResource<Font>("Arial.ttf");

            // Stretch text to fill button
            RectTransform textRT = textGO.GetComponent<RectTransform>();
            textRT.anchorMin = Vector2.zero;
            textRT.anchorMax = Vector2.one;
            textRT.offsetMin = Vector2.zero;
            textRT.offsetMax = Vector2.zero;

            // Set button size
            RectTransform buttonRT = buttonGO.GetComponent<RectTransform>();
            buttonRT.sizeDelta = new Vector2(160, 30);
        }
    }
}

Output

A vertical stack of 3 buttons labeled 'Button 1', 'Button 2', and 'Button 3' spaced evenly inside the parent container.

Common Pitfalls

Common mistakes when using layout groups include:

• Not adding a ContentSizeFitter when you want the parent to resize automatically to fit children.
• Forgetting to set childControlWidth or childControlHeight to true if you want children to resize automatically.
• Mixing manual positioning of children with layout groups, which causes conflicts.
• Not using a RectTransform on the parent GameObject.

csharp

/* Wrong: Manually setting child positions with layout group active */
// This causes layout group to override manual positions

/* Right: Let layout group control child positions and sizes */
// Remove manual position changes and rely on layout group settings

Quick Reference

Summary tips for using Layout Groups in Unity:

• Add HorizontalLayoutGroup, VerticalLayoutGroup, or GridLayoutGroup to a parent with RectTransform.
• Use ContentSizeFitter to make parent resize to children.
• Configure spacing, padding, and child alignment in the inspector or code.
• Do not manually move or resize children when using layout groups.
• Combine layout groups with LayoutElement on children for fine control.

Key Takeaways

Add a Layout Group component to a parent GameObject with RectTransform to arrange UI children automatically.

Use ContentSizeFitter to make the parent container resize based on its children.

Avoid manual positioning of children when using layout groups to prevent conflicts.

Customize spacing, padding, and alignment to control the layout appearance.

Use LayoutElement on children for specific size control within the layout group.