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.
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.
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:
To design better and advanced content, you may combine the techniques explained in the previous section. For example:
You have a dashboard divided in three horizontal sections. The first one has two boxes with information, the second row has three charts, and the third row has two charts:
You have four images with paragraphs of text illustrating them. The text is left justified next to the image:
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.
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.
Designing content using Tables seemed more convenient because it is apparently easier for structuring, however, the use of containers brings further advantages:
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.
Margins Applied by the Grid | Styles Applied by the Grid