Strict Order In Zero Block

In Zero Block, you can now set the arrangement of elements within Auto Layout at different screen resolutions using the Strict Order setting. This comes in handy when you want the position of Flex group elements to vary in the mobile and desktop versions.

The Strict Order setting defines the order of the elements within Auto Layout. By default, all flex elements have an order value of 0 (Not set). Elements with a lower order value are placed first. If you set one of them to -1 (First), the element will be placed first. If 1 (Last), it will be placed last.

You can set a different Strict Order value for each screen resolution. For example, on a desktop, the text can be the third element in the group, and on a mobile, the last.

The Strict Order is also useful for complex compositions with a large number of elements. If several of them need to be rearranged for the mobile screen, specify a different number for each of them using Custom value (e.g., from 1 to 6). This will make it easier to arrange them in the desired order.

Let's look at an example with a product card block to see when the Strict Order setting can come in handy.

In Zero Block, we've created a layout with six elements: Four product cards and two tiles that link to the Catalog. This group has a common Auto Layout to make editing content and designing responsive versions easier.

When switching to editing the mobile version, the order of the cards can become disorganized. If you move them manually, the composition also changes on the desktop version.

To prevent this, you can assign a Custom value under Strict Order to the elements you need. This way, the cards will appear in the correct order on the mobile version of your website, while the desktop layout stays just as you designed it.