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.
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.
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.
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.
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.
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.
Opacity is the opacity of the columns' fill;
Border opacity is the opacity of columns' borders.
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.
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.
