The Grid improves the design of Web Screens by providing a simple way of working with alignments, sizes, and spacing. This helps you to make content easily readable. Why? Because the human eye naturally tends to look for these visual guidelines to facilitate the reading.

For example, align content vertically to make it easier to read.

Fluid vs Fixed Grids

Before designing web screens, choose the kind of grid to use:

Choose the grid type in the properties of the theme in use by the module. See eSpace Properties and Theme Properties.

Designing Content with a Grid

When using a grid, the content design is normally done resorting to Containers. They allow you to easily structure elements.

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

Advanced Design

To design better and advanced content, you may combine the techniques explained in the previous section. For example:

    1. Use the technique explained in Organize Content in Rows to create the horizontal sections;
    2. Use the technique explained in Insert Columns in Rows to add two columns for the boxes in the first row, three columns for the charts in the second row, and two columns for the charts in the third row.
    1. Use the technique explained in Organize Content in Rows to create four rows for the images with text;
    2. Use the technique explained in Add Side Content to put images with their text in each row.

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:

Behavior on Narrow Screens

When displaying the application on a narrow screen, OutSystems Platform reorganizes the content of the screen into a single column.

In some situations you might want to keep some of the containers from being reorganized on a smartphone. For example, if you designed a certain screen block exactly to the size of the smartphone your company uses. If the used Theme's 'Grid Type' property is set to 'Fluid', you have the possibility to force that a container is maintained in the format you defined. To implement this, apply the KeepFluidOnSmartphone style to the container.

See Also

Margins Applied by the Grid | Styles Applied by the Grid