Horizontal, Vertical, and Grid Layout Groups for UI in Unity 2021 URP

In this article we’ll cover the various layout group types that we can use with Unity’s built-in UI system.

Initial Scene Setup
Before we can jump into the details, we need to get our testing scene setup.

We’ll start by adding a Canvas with 7 image elements that have been assigned sprites with various sizes and appearances.

Go ahead and create 3 empty elements and name them “Horizontal”, “Vertical”, and “Grid”.

Now duplicate the image elements and place a set as children of each empty element representing our layout types.

For each empty element, add the corresponding layout group component.

The Horizontal Layout Group
We can see above that once the Horizontal Group Layout component was added to the image’s parent element, our images were rearranged in the predictable horizontal layout.

I’ve set the Horizontal element scale to 0.5 so as fit all elements on the UI Canvas.

If we test out the various fields we can see the effects.

Note that when we enable the “Control Child Size” fields we encounter an issue.

That is because the layout group parent element is set to a width and height of 100 x 100, while my scene is a full 1920 x 1080.

All of the child elements were forced to cram into this tiny area!

Set each layout group’s parent element to be 1920 x 1080 on their “Width” and “Height” fields.

Set the alignment and position of each parent element as middle center (shown above).

Then resize each parent element to fit within the Canvas bounds shown in the Scene view.

As we can see above, the last 3 fields for controlling the child elements of the layout group have the greatest impact on appearance!

The Vertical Layout Group
The Vertical Layout Group is very similar to the Horizontal Layout Group.

Here we can see the same effects as before only with a different overall orientation of the child elements.

The Grid Layout Group
The Grid Layout Group differs from the prior groups by essentially forcing a “one-size-fits-all” approach.

Each element will be forced to adhere to the grid’s Cell Size.

If, like me, the Grid layout is wonky and elements are upside down and positioned at bottom right when they should be top left, use the scale tool to invert the Grid element in the Scene view until it is correct.

Above, we can see what playing with our Grid Size fields will do as well as the Start Corner field.

The elements will literally rearrange to order as they are in the Hierarchy’s top-to-bottom order based on a given Start Corner of the layout group element.

The Start Axis field likewise will implement an ordering system based on the top-to-bottom order in the Hierarchy window of child elements.

The Child Alignment field orients each element to a position within its cell.
The Constraint field allows us to set a fix column or row count.

The Layout Element Component
We can also add the Layout Element Component to our child elements to override the parent element’s Layout Group structure.

As shown above, other than ignoring the parent Grid Layout Group altogether, the rest of the settings do very little.

These fields do become relevant with a Horizontal Layout Group (as shown above) and a Vertical Layout Group though.

See you in the next article where we will put these layout groups to practical use with a Tile game!