Laying out a page or view using the grid layout
About this task
The grid layout is where you can arrange content using grids, containers, and cells.
A grid is a container that is 12 units wide. The actual width of each unit is variable and depends on the screen size. Within a grid, you can have containers and cells. A container groups related cells. Cells are placeholders for content. Containers and cells can be from 1 to 12 units wide. If the container does not have at least one cell, the designer removes it.

If the total width of the cells in a grid is 12, the grid forms a complete row. When you edit a cell in a complete row, the designer tries to preserve the complete row by automatically resizing other cells. That is, if you delete a cell, another cell expands to occupy the space. Similarly, if you add a cell to the left or right of another cell, a cell shrinks to fit the new cell. However, there is a minimum size of 3 for new or automatically resizing cells. In this case, the designer moves the end cell to form a new row. When you are editing a grid that has less or more than 12 units, the designer does not automatically resize cells. The limit of 12 units applies regardless of the number of containers within a grid.
A grid does not have a vertical limit. However, having too many vertically stacked cells results in a user interface that requires users to do a lot of scrolling.
Under
, you can set the grid layout properties that are described in the following table.Property | Description |
---|---|
Horizontal span | Specifies the number of horizontal units that a selected grid cell or container occupies in a grid. A grid is a maximum of 12 horizontal units wide. You can specify a number from 1 to 12. If you increase or decrease the horizontal span, the width of the selected grid cell or container will increase or decrease on the right side of its current position. |
Visibility | Specifies whether a grid cell or container is displayed or hidden in a grid. This property
has the following options:
|
Orientation | Specifies whether the layout items in a selected grid cell are laid out horizontally or
vertically. This property has the following options:
|
Horizontal alignment | Controls the horizontal alignment of layout items in a selected grid cell. This property has
the following options:
Note: Horizontal alignment is not available for layout items in a selected grid cell unless the
orientation is horizontal.
|
Vertical alignment | Controls the vertical alignment of content in a selected container or grid cell, such as the
grid cells in a container or the layout items in a grid cell. This property has the following options:
Note: Vertical alignment is not available for layout items in a selected grid cell unless the
orientation is horizontal.
|
Control ID | Specifies an alphanumeric identifier that uniquely identifies a selected layout item. This ID can be used to locate items in JavaScript and advanced preview artifacts. |
To lay out a page or view using the grid layout, use the following instructions.