Game Development
Layout groups
Learn Horizontal, Vertical and Grid Layout Group.
Layout Groups
Rather than manually positioning multiple UI elements (like menu buttons or inventory slots), Layout Group components arrange them automatically.
// Configuring vertical layout group and gap spacing
using UnityEngine.UI;
VerticalLayoutGroup layout = GetComponent<VerticalLayoutGroup>();
layout.spacing = 10f;
Whenever an element is added or deleted, neighboring element positions recalculate automatically.
Horizontal, Vertical, and Grid Layout
HorizontalLayoutGroup stacks elements horizontally side by side, VerticalLayoutGroup stacks vertically, and GridLayoutGroup aligns them in a grid. The spacing field dictates gap pixels between items.
// Setting grid slot dimensions to 64x64 pixels
GridLayoutGroup grid = GetComponent<GridLayoutGroup>();
grid.cellSize = new Vector2(64f, 64f);
These layout formatters simplify building dynamic inventories and responsive menus.
Exercise Print layout type and spacing info
Assign "VerticalLayoutGroup" to layoutType and 10 to spacing. Print Layout: VerticalLayoutGroup | Spacing: 10 to the console.
Show example solution
using System;
class Program
{
static void Main()
{
string layoutType = "VerticalLayoutGroup";
int spacing = 10;
Console.WriteLine("Layout: " + layoutType + " | Spacing: " + spacing);
}
}
Test yourself
-
Which component is used to arrange elements like inventory slots in rows and columns in a grid format?
- ParticleSystemRenderer
- HorizontalLayoutGroup
- GridLayoutGroup
- AudioMixerGroup
Show answer
GridLayoutGroup — GridLayoutGroup arranges child elements into a grid matrix composed of defined rows and columns.
-
Attach vertical layout group
VerticalLayoutGroup vLayout = gameObject.AddComponent<____>();
Show answer
VerticalLayoutGroup vLayout = gameObject.AddComponent<VerticalLayoutGroup>();
-
Layout formatters
- HorizontalLayoutGroup
- Arranges UI side by side horizontally
- VerticalLayoutGroup
- Arranges UI vertically one under another
- GridLayoutGroup
- Arranges UI in row-column grid
- spacing
- Pixel gap between elements
Next lesson: Summary - UI Canvas
