About the Grid

The Grid improves the design of Web Screens by providing an easy way of working alignments and spacing to make content easier for reading - because the human eye tends naturally to look for these kind of rules when reading.

For example, make it easier for reading by aligning content vertically.

Designing Content in the Grid

The organization and structure of your application's content in a Grid is made with Containers.

To better understand how to do it, follow these examples:

Organize Content in Rows: design content in rows and make sure content is not affected by resizing the browser canvas;

Insert Columns in Rows: design columns in rows and adjust vertical alignments among them;

Add Side Content: design multiple rows of vertically aligned content on the side of a single content;

Align Content in Columns: design content vertically aligned in columns.

For more advanced design of application's content, simply combine the above techniques inside one another's. For example:

To design a dashboard with three rows where the first has two columns, the second has three columns, and the third has two columns, simply use the Organize Content in Rows technique and then use Insert Columns in Rows to insert columns in each row.
To add a set of rows, each with an image and aligned side content, first Organize Content in Rows and then use the Add Side Content technique on each row.
To organize your Web Screen content in columns, with rows which, in turn, are also divided in columns, first Align Content in Columns, then Organize Content in Rows inside each column, and finally Insert Columns in Rows on the rows inside each column.

Margins Applied by the Grid to Widgets

While working the Grid, default margins are applied to promote spacing between widgets. This spacing reduces the end-users effort when reading and understanding the content you design.

Check out the values applied by the Grid to widget margins in the Margins Applied by the Grid topic.

Styles Applied by the Grid to Containers

While working with containers in the Grid, styles are applied to those containers to make them behave as expected.

Check out which styles are applied to containers in the Styles Applied by the Grid topic.

Why Using Containers in the Grid Instead of Tables?

Designing content using Tables seemed more convenient because it is apparently easier for structuring, however, the use of containers brings further advantages:

- Containers make it easier to adjust the content design simply through CSS, which means that by using containers, it will be easier to switch to a theme that implements responsive web design techniques making your applications work smoothly in different form factors;
- Containers and CSS allow more consistent design throughout the application than the use of tables;
- Content rendering in the browser is faster with containers because the browser renders the HTML as it is being interpreted and styles can already be cached. With tables, there's a performance penalty because the entire content needs to be downloaded before the browser can properly dimension the Web Screen;
- Tables may be non-compliant with the web accessibility standards.