The grid makes it easier to define the visual structure of your page and speeds up the layout design. It helps unify all elements and sections of the website and maintain visual order.
By default, a 12-column grid is used in Tilda. To set up a custom grid, go to Zero Block, open the Artboard settings, and scroll down to the Zero Block settings.
Modular grid settings in Zero Block:
▪Columns - number of columns in the grid.
▪Column Gutter - spaces between columns. When modifying Column Width, the Column Gutter changes as well (and vice versa).
▪Column Margins - indents to the left and right of the artboard edge for columns.
You can also customize the horizontal grid. It is often used for typography.
▪Row Baseline - horizontal grid spacing. This value is usually based on the font size. E.g., if your font size is 14px with a 20px line spacing, the Raw Baseline would also be 20px.
▪Opt for Module Height if you are using repeating modules. If you make the value 5, after every five lines there will be a blank line and the module will start over.
▪Row Margins - indents above and below the artboard edge.
📱/ 🖥 The grid is set separately for each screen resolution, which means it will be different for desktop and mobile devices. To enable or disable the grid, press G or open the three dots menu in the upper right corner of the screen.
By default, grid settings are set for the entire website. If you create a new Zero Block, it will come with the previously configured modular grid. This will help keep the design consistent across different pages of the project.
However, if you want the grid to be applied to a specific block, go to the grid settings and select "Current Block" under Use For.
You can always discard your changes and restore the default grid. To do this, click on the Reset button at the very bottom of the settings panel and save the changes.
