--- title: "Grouping and Layout Techniques for UI Components" content_type: tutorial url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3?language=en" language: en difficulty: beginner duration_minutes: 25 unity_version: - "2019.4" supported_unity_versions: - name: "2019.4" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=2019.4" - name: "2019.3" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=2019.3" - name: "2019.2" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=2019.2" - name: "2019.1" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=2019.1" - name: "2018.4" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=2018.4" - name: "2018.3" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=2018.3" - name: "2018.2" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=2018.2" - name: "2018.1" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=2018.1" - name: "2017.4" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=2017.4" - name: "2017.3" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=2017.3" - name: "2017.2" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=2017.2" - name: "2017.1" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=2017.1" - name: "5.x" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=5.x" - name: "4.x" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en&version=4.x" available_languages: - name: "en" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3.md?language=en" - name: "ja" url: "https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3-jp.md?language=ja" - name: "zh-cn" url: "https://learn.unity.com/tutorial/uizu-jian-de-fen-zu-he-bu-ju-ji-zhu-2019-3.md?language=zh-cn" last_updated: "2026-08-04T14:23:15.000Z" --- # Grouping and Layout Techniques for UI Components Build a flexible inventory UI that arranges elements dynamically with different Layout Groups. Unity’s UI system is flexible enough for nearly any imaginable purpose. Sometimes, there are situations where we don’t know ahead of time what we’ll need to display, but rather what we have room for. In this tutorial, you will learn to create an inventory that uses different Layout Groups to arrange your UI elements. ## 1. Grouping and Layout Techniques for UI Components This tutorial has been verified using Unity 2019.4.10f1 LTS - [https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3](https://learn.unity.com/tutorial/grouping-and-layout-techniques-for-ui-components-2019-3) [Video](https://connect-mediagw.unity.com/h1/20190603/videos/cb7317f4-8aa5-42a7-8a31-10f3b10a76fd_GroupingLayoutUI_1.mp4) Unity’s UI system is flexible enough for nearly any imaginable purpose. Sometimes, there are situations where we don’t know ahead of time what we’ll need to display, but rather what we have room for. One example of this is an inventory in a role-playing game. The developer shapes what’s possible in a game, but it would be impractical to try to design a UI for every possible situation. Instead, Unity offers Layout Groups to handle arranging UI elements. In this exercise, we’ll create an inventory that uses Vertical and Grid Layout Groups. There is also a Horizontal Layout Group, which functions much like the Vertical. UI elements that are arranged by Layout Groups can optionally carry the Layout Element component for more control. ## 2. Creating an Inventory: Part 1 — Scripting 1\. Create a new script, **InventoryItemButton**, and double click it in the Project window to open Visual Studio. 2\. Delete Update, as we won’t need it for this exercise. Change Start to **Awake**. 3\. On line 4, type: ```csharp using UnityEngine.UI; ``` 4\. Beginning just inside the class definition, type: ```csharp private Text buttonText; private string[] itemTypes = { “Armor”, “Weapon”, “Spell” }; public int typeIndex; ``` 5\. In Awake, type: ```csharp typeIndex = Random.Range(0, 3); buttonText = GetComponentInChildren(); buttonText.text = itemTypes[typeIndex]; ``` 6\. **InventoryItemButton** is complete (**Figure** **01**)_._ Save your changes. ![Figure 01: The completed InventoryItemButton script](https://connect-mediagw.unity.com/h1/20201002/learn/images/ac32e977-1388-4c70-a81a-2d49b2373020_image5.png) 7\. Back in the Unity Editor, create a new script called **InventoryDisplay** and open in Visual Studio. 8\. Delete both Start and Update. This script will only be responsible for showing and hiding items in the inventory. 9\. Starting on line 7, type: ```csharp public void ShowOnly(int itemType) { for (int i = 0; i < transform.childCount; i++) { InventoryItemButton thisItem = transform.GetChild(i).GetComponent(); thisItem.gameObject.SetActive(thisItem.typeIndex == itemType); } } public void ShowAll() { for (int i = 0; i < transform.childCount; i++) { transform.GetChild(i).gameObject.SetActive(true); } } ``` 10 .Save changes. InventoryDisplay is now complete. (**Figure** **02**) ![Figure 02: The completed InventoryDisplay script](https://connect-mediagw.unity.com/h1/20201002/learn/images/25bf4107-a1f4-47e6-bed4-1894fb931999_image2.png) 11\. Return to the Unity Editor. ## 3. Creating an Inventory: Part 2 — Assembling the UI 1\. In a new Scene, create an empty GameObject named InventoryDisplayControl. 2\. Add a **Vertical Layout Group** component to InventoryDisplayControl, and set the **Child** **Alignment** to **Middle Center**. (**Figure 03**) ![Figure 03: Because the contents of our Vertical Layout Group won’t change in this exercise, Child Alignment is a matter of taste. It becomes more important when more control is needed.](https://connect-mediagw.unity.com/h1/20201002/learn/images/575d4cda-c15a-4941-a031-997bb8432ee1_image9.png) 3\. Note that in the Inspector, InventoryDisplayControl’s Transform has been replaced by a Rect Transform, and the Rect Transform’s position has been set to that of the original Transform. Set the size to 150x100 (**Figure** **04**)_._ We’ll adjust the position when the rest of the Inventory is set up. ![Figure 04: Because this GameObject isn’t on the canvas yet, we can’t set its alignment, only its size and position.](https://connect-mediagw.unity.com/h1/20201002/learn/images/3b415e8f-8350-4e8d-a9fa-f583606d3ad3_image1.png) 4\. From the GameObject dropdown, select **UI** > **Button**. Creating a UI element also creates a Canvas and Event System if those weren’t already in the scene. Name the button button ShowAllItems and set its size to 150x25. 5\. In the Hierarchy window, click the triangle next to ShowAllItemsButton to show the child Text component. Highlight the Text GameObject and, in the Inspector, change the text from Button to Show All. 6\. In the Hierarchy window, drag InventoryDisplayControl onto the Canvas and release. 7\. Drag and drop ShowAllItemsButton onto InventoryDisplayControl to put it under the control of the Vertical Layout Group. (**Figure** **05**) ![Figure 05: A GameObject with a Layout Group component will automatically control the layout of any child UI elements.](https://connect-mediagw.unity.com/h1/20201002/learn/images/f8472d00-fff9-4caa-983f-796c18a1d076_image8.png) 8\. From the GameObject dropdown, select **UI** > **Panel** to create the background for our main inventory display. Name it Inventory Panel. Set the anchor preset to center, and the size to 676x340 (**Figure** **06**)_._ This size was chosen to allow for the planned layout: a maximum of 6x3 buttons at 100x100 pixels each, with 12 pixels padding in either dimension and extra room for the panel border. ![Figure 06: The size of your UI elements will depend on many factors, including the amount of information they need to convey and (optionally) the reference resolution you’re targeting.](https://connect-mediagw.unity.com/h1/20201002/learn/images/673a480e-4172-4cda-97bb-435f790d8c93_image10.png) 9\. Using either the move Gizmo, or directly entering positions into the Rect Transforms for InventoryPanel and InventoryDisplayControl, move both so that they do not overlap. 10\. Highlight InventoryPanel and add the **Inventory Display** component created earlier. 11\. Add a Grid Layout Group component to InventoryPanel. Set the Left and Top padding to 8 pixels, spacing to 12x12 pixels, and set Constraint to a Fixed Column Count of 6. (**Figure** **07**) ![Figure 07: The Grid Layout Group combined with buttons set to Automatic Navigation (the default) is a quick way to make an inventory that’s intuitive to use.](https://connect-mediagw.unity.com/h1/20201002/learn/images/f618bb13-99d4-4d41-9dbf-367dacf0937c_image11.png) 12\. Create a **Button** and name it _InventoryItemSample_. Add the **Inventory Item Button** component, and drag the button onto _InventoryPanel_. (**Figure** **08**) ![Figure 08: The final structure for our simple inventory. All new buttons will be created as children of InventoryDisplayControl and InventoryPanel.](https://connect-mediagw.unity.com/h1/20201002/learn/images/38a076aa-547e-43e0-810c-c85b6212109d_image7.png) 13\. In the Hierarchy window, highlight _InventoryItemSample_ and press **Ctrl + D** (PC) or **Cmd + D** (Mac) to duplicate it 17 times, for a total of 18 buttons. (**Figure** **09**) ![Figure 09: The Grid Layout Group makes sure that all 18 icons go exactly where intended without the need for manual placement.](https://connect-mediagw.unity.com/h1/20201002/learn/images/b5f64166-2325-4043-8a61-c4d0a8d59abe_image6.png) 14\. Highlight ShowAllItemsButton in the Hierarchy window. In the bottom of the Inspector section marked Button (Script), click the + to add an OnClick() event. Drag InventoryPanel into the GameObject slot, and from the Event dropdown, select InventoryDisplay > ShowAll. (**Figure** **10**) ![Figure 10: A single click of a button can invoke many events, but here just one will suffice.](https://connect-mediagw.unity.com/h1/20201002/learn/images/edbb5393-2456-4106-bae4-e121a80d60d7_image4.png) 15\. With ShowAllItemsButton still highlighted, press **Ctrl + D** (PC) or **Cmd + D** (Mac) once to duplicate it. Name the new button _ShowArmorButton_, and change its text to **Show Armor**. 16\. In the OnClick() events list for _ShowArmorButton_, change the event to **InventoryDisplay** > **ShowOnly (int)**. Leave the parameter at the default of **0**. 17\. Duplicate _ShowArmorButton_, changing **Armor** in the name and text to **Weapons**. 18\. In the Inspector for _ShowWeaponsButton_, change the parameter for **InventoryDisplay.ShowOnly** to **1**. 19\. Duplicate _ShowWeaponsButton_, changing **Weapons** in the name and text to **Spells**. Change the parameter for **InventoryDisplay.ShowOnly** to **2**. (**Figure** **11**) ![Figure 11: OnClick events can optionally pass a parameter to the invoked method.](https://connect-mediagw.unity.com/h1/20201002/learn/images/bfb49022-f7af-49a1-9593-2c1e01e21c51_image12.png) 20 .Press Play. Each button is randomly assigned an item and its text is updated to reflect what it holds. (**Figure** **12**) ![Figure 12: The inventory in action, with the default setting of showing all 18 randomly assigned items.](https://connect-mediagw.unity.com/h1/20201002/learn/images/a40452b9-c88b-4157-96c9-f76f953d9289_image3.png) 21\. Try clicking Show Armor, etc. Though you can click the Inventory Items themselves, it does nothing in this demonstration. In a real game, you might enable equip/unequip actions when an item is clicked directly in the inventory. 22\. When ready, exit Play mode. ## 4. Conclusion Nesting UI elements in layout groups is an efficient way to automate layout and handle a wide range of situations with far less code and manual effort than would be necessary otherwise.