Nesting Groups In Zero Block

Zero Block now supports nesting, allowing you to place one group of elements inside another. Let's explore when nesting can be useful and how to use it.

Nesting can be especially useful when designing with Auto Layout (flex containers), creating cards, galleries, and more. For example, you've created a card for your blog with a title, description, and image. You then grouped these elements (select multiple elements → Group), set it as an Object group (Group → Object), and enabled Auto Layout (Auto Layout → Flex → Auto) so the card's height automatically adjusts based on its content. You also added a URL and set a background color.

To more flexibly adjust the spacing between the title and description, you grouped these two text elements together and enabled Auto Layout for this new group. Now, you have a nested group with flex properties.

1. Via the Layers panel.
2. Using drag-and-drop (only with Auto Layout enabled).
3. With the Cmd/Ctrl+G keyboard shortcut.
4. Through the Settings panel.
5. From the context menu.

💡 You can nest groups within other groups up to five levels deep. However, elements grouped as a Logical group cannot be nested inside an Object group. If you attempt to nest them, the Logical group will automatically convert to an Object one.

Here are some examples of when nesting groups comes especially handy and how you can use them in your projects.

Nesting groups is also useful for applying different animation effects to various groups. For example, you can set an appearance animation for an entire card and a separate hover animation for a nested group with a single element, like an arrow.

Auto Layout, combined with nesting, allows you to quickly make your website's layout responsive across different screen resolutions. It also saves you from repetitive manual work—once set, the settings automatically control how all elements respond to content or size changes and align accordingly.