Layout Grid

Last update: Edit

1 Introduction

The layout grid is a widget that gives structure to your pages. A layout grid contains 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 Components

2.1 Rows

A layout grid can contain one or more rows. Each row contains columns and the number of columns can differ per row.

A row has the following properties:

  • Class – allows you to specify one or more cascading style sheet (CSS) classes

  • Style – allows you to specify additional CSS styling

  • Visible – allows you to hide an element from a page

    Row Properties

For more information on properties listed above, see Properties Common for Widgets.

2.2 Columns

A row in a layout grid can contain one or more columns.

A column has the following properties:

  • Class – allows you to specify one or more cascading style sheet (CSS) classes (for more information on this property, see Properties Common for Widgets)
  • Style – allows you to specify additional CSS styling (for more information on this property, see Properties Common for Widgets)
  • Weight – determines how wide the column is, weight of all columns in a row must add up to 12. Examples of rows with valid column width are the following ones:
    • One column with weight 12
    • Two columns with weight 6 each
    • One column with weight 3 and one column with weight 9

In the example below, you can see one column with weight 12 and it takes up the full width, and two columns with weight 6 each:

Columns Example

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

2.2.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 +

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

3 Properties

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

Layout Grid Properties

Layout grid 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 for Widgets.

3.2 General Section

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

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 for Widgets.

4 Read More