Layout Grid
Introduction
The layout grid is a widget that gives structure to your pages.
A layout grid consists of rows and columns:
In a browser, the layout grid is based on the Bootstrap grid system. For more information on the Bootstrap grid system, see the official Bootstrap documentation.
Row and column properties described below are available if your app has Atlas Core version 3.0 or above.
For more information on row and column properties, see the Rows and Their Properties and Columns and Their Properties sections.
Properties Pane
The properties pane is divided into two major sections by a toggle at the top of the pane: Properties and Styling.Layout grid properties consist of the following sections:
Properties:
Styling:
Properties
General Section
Width
The General section contains the Width property, which determines the width of the layout grid.
| Value | Description |
|---|---|
| Full width | The layout grid spans the full width of the available space and will stretch and shrink. |
| Fixed width | The layout grid has a fixed width but it is still responsive to viewport changes. Note that the width is not configurable in Studio Pro but is determined by Bootstrap. |
Styling
Common Section
Rows and Their Properties
A layout grid can contain one or more rows. Each row contains columns and the number of columns can differ per row.
An example of layout grid row properties is represented in the image below:
Row properties consist of the following sections:
Common Section
General Section
The General section of a row contains the following properties:
-
Columns – sets the number of columns in the row
-
Align columns vertically – this property aligns all columns in a row vertically. You can select the following options:
- Not set – alignment is not set
- Top – columns are aligned to the top of the layout grid
- Center – columns are aligned to the center of the layout grid
- Bottom – columns are aligned to the bottom of the layout grid
- Spacing between columns – when set to Yes, adds spacing between columns
Visibility Section
Visibility determines whether a widget is displayed to the end-user as part of the page.
For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.
Columns and Their Properties
Columns form a row of a layout grid.
An example of layout grid column properties is represented in the image below:
Layout grid column properties consist of the following sections:
Common Section
General Section
Width
This property allows you to define the column width.
For web pages, it is divided into Desktop Width, Tablet Width,and Phone Width which allows you to define column width per device type.
For native pages, you will see one property called Width.
The Width property contains the following options:
- Auto-fill – takes the available space for a column (for example, if there is one column, it will span the column for the whole row, and for two columns, it will divide the space equally between them)
- Auto-fit content – automatically fits the size of the column to its content
- Manual – allows you to manually set the size of the columns
Column width can be used to make your layout more flexible and adaptive to different types of devices.
For example, you have a layout grid with one row and two columns: a picture is in one column, and a text with details is in another.
For the desktop and tablet, you might want to set the first column with a picture to Auto-fit content and the second one to Auto-fill, this way the first column will adjust to the size of the picture, while the second one will take the rest of the row:
For phone, it can be a good idea to place two columns one under another, setting them to Manual width of 12 (for more information on the column size property, see the Size section). In this case, the second column will be automatically wrapped to another line:
On the picture below you can see the settings for two column described above:
Size
The Size option is displayed only if the width is set to Manual.
This setting allows you to manually set the column size for desktop, tablet, or phone by using the corresponding property: Desktop Size, Tablet Size, Phone Size.
Align Vertically
The Align vertically property overrides the Align columns vertically property on the row and sets alignment for an individual column.
Performing Basic Actions
Adding a New Row or a Column
To add a new row, do the following:
-
Select an existing row in a layout grid.
-
Right-click and select Insert row above or Insert row below:
-
Select a column layout (how many columns should be in a row and what weight columns should have).
A new row is added to the layout grid.
To add a new column, do the following:
- Select a column next to which you want to add a new one.
- Right-click and select Add column left or Add column right.
A new column is added, the weight 1 is automatically set for it.
Performing Other Actions on Rows
In adding to inserting a new row, you can perform the following actions when right-clicking a row:
- Move up – moves a row up in the layout grid, you can use a shortcut for it Ctrl + ↑
- Move down – moves a row down in the layout grid, you can use a shortcut for it Ctrl + ↓
Performing Other Actions on Columns
In adding to inserting a new column, you can perform the following actions when right-clicking a column:
- Move left – moves a column left in the row, you can use a shortcut for it Ctrl + ←
- Move right – moves a column right in the row, you can use a shortcut for it Ctrl + →
- Row – allows you to perform actions on the column’s row