Layout Grid

Last update: Edit

1 Introduction

The layout grid is a widget that gives structure to your pages.

A layout grid consists of rows and columns: Layout Grid Example

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.

2 Layout Grid Properties

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

Layout Grid Properties

Layout grid properties consist of the following sections:

2.1 Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

2.2 Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed.

2.3 General Section

2.3.1 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.

2.4 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.

3 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

Row properties consist of the following sections:

3.1 Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

3.2 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

3.3 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.

4 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:

Column Properties

Layout grid column properties consist of the following sections:

4.1 Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

4.2 General Section

4.2.1 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 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:

Layout Example, Desktop

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:

Layout Example, Phone

On the picture below you can see the settings for two column described above:

4.2.2 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.

4.2.3 Align Vertically

The Align vertically property overrides the Align columns vertically property on the row and sets alignment for an individual column.

5 Performing Basic Actions

5.1 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:

    Adding a New Row

  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.

5.2 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 +

5.3 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

6 Read More