Auto layout is a way of grouping x amount of elements together, while maintaining the same spaces within this group. This method is very convenient for creating components of the same type (various cards of goods, news, vacancies; entities in which content can change and resize) and further combining them into blocks.

Auto layouts are categorized into horizontal, vertical, and using rebuilding to the next line. They also differ in the type of spaces. There are positive and negative values. What type of auto layout is needed depends on the task being solved.

With a good pumping of the skill, you can collect entire pages on auto layouts, this is very practical for further replacement, adding new blocks, as well as in case of revising the page structure.

To apply auto layout to a group, press Shift+A. After that, windows for its settings will appear in the right toolbar:

• The upper right corner will indicate the width and height of the auto layout, as well as the settings for the behavior of elements within this group. There are three settings in total: fixed, hug and fill. These settings define the behavior properties of objects. «Fixed» — fixed width or height of the content (often used to create blocks of the same size); «Hug» — the content inside adapts to the width/height, «Fill» — the content fills all the allotted space within the frame.

You can also set the minimum and maximum height/width for auto layouts. This is necessary to use the Wrap setting, which allows you to distribute content in auto layout with the rebuilding of blocks to the next line, as well as to maintain the minimum/maximum view of the component in the layout.

• Below the property settings block, there is a panel for customizing the group with auto layout. Here you can set the direction (vertical, horizontal, move to the next line) internal spacing between objects, as well as external spacing around objects (horizontal and vertical). Some objects can be assigned absolute positioning. This setting allows you to ignore the rules of auto layout, but the objects will obey the established constraints.

• There is also a small window in the right panel that allows you to visually see the positioning and order of elements in the auto layout.

We use internal spaces in layouts to reduce the number of nested layers.

When organizing space in layouts, it’s important to start with internal components and gradually move to external ones. This helps to take into account aspects such as the click area, variability, and completeness of the component as an independent unit of the interface. In addition, this approach reduces the number of layers and makes the layout more convenient for work and perception.

For example, by setting internal spaces for the Assets block, we can avoid creating an additional vertical layout with spacing of 16, which would otherwise have to be tied to the top tabs.