Types of Automatic Layout Groups

When a UI object has an automatic layout group component attached to it, all of its children will be aligned, resized, and positioned based on the parameters of the layout component. There are three automatic layout group options: Horizontal Layout Group, Vertical Layout Group, and Grid Layout Group.

The following screenshot shows three panels (represented by gray rectangles), each with six UI image children (represented by the black rectangles): the first panel has a Horizontal Layout Group component, the second panel has a Vertical Layout Group component, and the third panel has a Grid Layout Group component:

From the preceding screenshot, you can see clearly what the three types of Automatic Layout Groups accomplish. You can use any combination of the three to create nested, perfectly spaced layouts, as follows:

Let's look at each of these layout groups individually and explore their various properties.