Horizontal, Vertical, and Grid Layout Groups

Objective: Horizontal, Vertical, and Grid Layout Groups.

Before doing anything I will create an empty object and add Horizontal, Vertical, and Grid Layout Group components, according to the game objects' names. I will add three images in Canvas with different sizes.

Horizontal Layout Group

In the first step, I will take all these images and put them into the Horizontal Layout Group.

The Horizontal Layout Group component places its child layout elements next to each other, side by side.

Their widths are determined by their respective minimum, preferred, and flexible widths according to the following mode. To see that mode click the link https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-HorizontalLayoutGroup.html

Control child size, this will allow the element to grow but when reaches its native size it won't grow more.

Use child scale this will make the element native scale and you can't resize it.

This option I will show you its option quickly so this article does not grow to 50 pages.

Vertical Layout Group

This has the same feature as the Horizontal Layout Group, but only its element aline from top to bottom. here is a quick manipulation of its options.

Grid Layout Group

This has the same feature, but a few different features.

When adding all elements to the Grid Layout Group it makes all elements the same size.

To change the element size we can use an option called Cell size to make all objects big to make others that do not reach native size able to reach their size.

Here are a few other features where we can limit the row or column of the grid elements.

How to Get the native size of the element which is limited by the Grid Layout Group.

By using layout elements for individual elements of the Grid Layout Group. Then Set the preserve the Aspect Ratio. Then tick the control the size of the children.

We can arrange elements using this other feature in Grid Layout Group.

See you in the next article.