How To Set Up Custom Modular Grid In Zero Block

A modular grid allows you to define the basic structure of the design and work faster with the layout. It creates a unified layout of all the elements of the website and helps maintain the visual order.

By default, a 12-column grid is used on Tilda.

Zero Block editor: empty artboard displaying vertical column guidelines for the modular grid layout.

To configure the grid, go to Zero Block → Settings → click "Open" under "Zero Block Settings."

The grid is modified separately for each resolution: It will be different for desktop and mobile devices.

You can show or hide the grid by using the "G" key, or by clicking the three dots in the right top corner of the screen → "Show Grid" / "Hide Grid", or by switching "Hide grid" in Zero Block Settings.

Vertical Grid Settings

Columns stands for the number of columns;
Column width is the width of each column in pixels;
Column gutter is the spacing between columns in pixels;
Column margins are the spaces to the left and to the right of the grid in pixels.

In Zero Block, the "COLUMNS", "COLUMN WIDTH, PX", "COLUMN GUTTER, PX", and "COLUMN MARGINS, PX" fields in the modular grid settings panel.

Some values can be locked so that they don't change if you adjust others. To lock a value, click the lock icon next to the required parameter.

Horizontal Grid Settings

Row baseline is the spacing of the horizontal rows in pixels;
Module height is the number of rows (a module) followed by a blank row marking the beginning of the next module;
Row margins are spacings below and above the grid in pixels.

In the Zero Block grid settings panel, the "ROW BASELINE, PX", "MODULE HEIGHT", and "ROW MARGINS, PX" fields.

General Grid Settings

Color is the color of the columns (visible only in the editor);
Opacity is the opacity of the columns' fill;
Border opacity is the opacity of columns' borders.

In Zero Block: the "COLOR", "OPACITY", and "BORDER OPACITY" settings at the bottom of the grid settings panel on the right.

Important: By default, the grid settings are specified for the entire project. That is, the same modular grid will be used automatically in every Zero Block of the website.

To create a unique grid for a specific block, open the grid settings and select the "Current block" value for the "Use For" option. So the settings will be applied only to the current block, and the other blocks will use the default grid.

Zero Block grid settings: the "USE FOR" dropdown menu at the bottom of the right-hand panel.

You can always undo the modifications as well and restore the grid settings. To do this, click the "Reset grid settings to default" button → click "OK" in the pop-up window.