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.

Layout Grid Properties

An example of layout grid properties is represented in the image below:

Layout grid properties consist of the following sections:

• Common
• Design Properties
• General
• Visibility

Common Section

Design Properties Section

General Section

Width

The General section contains the Width property, which determines the width of the layout grid.

Visibility 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
• General
• Visibility

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

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
• General

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:

1. Select an existing row in a layout grid.

2. Right-click and select Insert row above or Insert row below:

   

3. 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:

1. Select a column next to which you want to add a new one.
2. 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

Read More

• Page
• Container Widgets
• Properties Common for Widgets