Tilda Blog

Combining Blocks of Different Widths On a Web Page

On Tilda, a 12-column modular grid is used, the most popular grid on the web. All blocks are contained within a grid but may vary in width: a simple text block TX01 takes 8 columns by default, while a YouTube video block VD01 takes 10 columns.

When you add blocks of different widths on a page, make sure they align well, otherwise, the page will have uneven edges.

💫 Don't use more than two block widths on a single page. You may set up blocks to 8 and 12-column width. Arrange them in any order—the page will look good.

💫 Make sure to maintain high contrast between columns of different widths—four columns or more. Otherwise, a slightly different width can seem like a sloppy design.

💫 Remember to align blocks vertically. If you are using an 8-column block with a 2-column indent at the start of a page, keep the same indent for the blocks of the same width. You'll break up the design flow if you add a block with a 1-column indent.

💫 When designing an article, keep the width of text and images the same. This will improve readability and the user won't be distracted by blocks of different widths. 8-column width is the best option for easy perception. This doesn't apply to the cover—it can be wider.

💫 Use a consistent style for aligning content across the page. If you decide to center-align your heading section, make sure the rest of the headings on the page are center-aligned, too.

Besides the width, the structure of the blocks is also important. For example, the Features block FR201 is made up of 3 sections, each one taking up 4 columns.
Made on
Tilda