This layout pattern has one main container which is always centered horizontally. The main container can contain other containers.
There are 4 variants for this layout pattern:
- Horizontal centered fixed width.
- Horizontal centered maximum width.
- Horizontal centered variable sidebars.
- Horizontal centered fixed sidebars
All four layout patterns are shown and described in detail in the video below.
In the formula’s below, several global variables are used:
| Name | Value |
| glb_MaxWidth | 1000 |
| glb_Width1 | 100 |
The canvas app with the layout patterns described on this page can be downloaded from my GitHub repository.
Horizontal centered fixed width
The main container has a fixed width. This means that when the screen width becomes less than the container width, parts of the container are not visible anymore.
This layout pattern is not useful when a small screen width must be possible.
Formula’s
| Control | Property | Formula |
| Container | Width | glb_MaxWidth |
| Container | X | If(App.Width > glb_MaxWidth, (App.Width - glb_MaxWidth) / 2, 0) |
Horizontal centered maximum width
The main container has a maximum width. This means that when the screen width is larger than this maximum, sidebars are automatically shown. When the screen width is smaller than the maximum width, no sidebars are shown and the container width is the same as the screen width.
An example of this layout pattern with content is shown and described in this video.
This layout pattern is my favorite and used for many other responsive design layout pattern examples.
Formula’s
| Control | Property | Formula |
| Container | Width | If(App.Width > glb_MaxWidth, glb_MaxWidth, App.Width) |
| Container | X | If(App.Width > glb_MaxWidth, (App.Width - glb_MaxWidth) / 2, 0) |
Horizontal centered variable sidebars
The screen consists of 3 areas:
- The left container (sidebar).
- The content container.
- The right container (sidebar).
The width of the sidebars is a percentage of the screen width. This also applies to the content container.
As can been seen in the video, this setup uses 4 containers. A main container which covers the whole screen and 3 sub-containers. The main container has a horizontal direction. There is a sub-container for each sidebar and one for the content. All sub-containers are configured to have a flexible width. In the example shown, the width of a sidebar is 1/10 of the screen width.
Formula’s
| Control | Property | Formula |
| Main container | Width | App.Width |
| Main container | Height | App.Height |
No other formula’s were needed. Quite simple right?
Horizontal centered fixed sidebars
The screen consists of 3 areas:
- The left container (sidebar).
- The content container.
- The right container (sidebar).
The width of the sidebars are fixed meaning that the their width does not depend on the screen width. The width of the content container then does vary on the screen width.
As can been seen in the video, this setup uses 4 containers. A main container which covers the whole screen and 3 sub-containers. The main container has a horizontal direction. There is a sub-container for each sidebar and one for the content. Both sidebar sub-containers are configured to NOT have a flexible width. The content sub-container therefore has a width of the screen width minus the width of the left sidebar and the width of the right sidebar.
Formula’s
| Control | Property | Formula |
| Main container | Width | App.Width |
| Main container | Height | App.Height |
| Sidebar sub-container | Width | glb_Width1 |