Grid properties - Column configuration tab

The following settings are ignored if the setting "Same container height" is activated on the General tab:

  • Centered

  • Always position last container at the right-hand edge of the grid

The preview at the bottom of the dialog will depict the result of both settings anyway, even though they do not have any effect in this case.

Display size

Here, you can edit the grid's columns for each display size (SMALL, MEDIUM, LARGE).

We recommend that you start with the layout for the display setting "SMALL". Naturally, the displays on smaller devices such as smartphones will present the greatest challenge to the depiction of content. Once all of the columns have been setup up for the smallest display size, the presentation on larger devices can be developed very quickly and simply.

Container column

By double-clicking on the name of a container, a dialog will open that allows you to modify the container name.

Width column

Click in this column to select the desired value from a list. Click here for more information about this setting.

If a container's content is provided with a specific width that is wider than the container itself, then this content will exceed the container's border. This overflowing content will be overlapped by the subsequent container. The responsive behavior of the container will not be affected. If you forgo using elements, then exceeding the container borders can be avoided. An individual style can be assigned to the affected responsive container or a grouping within a responsive container in order to control the overflow behavior. The overflowing area can be hidden using the CSS property "overflow-x: hidden" or horizontal scroll bars can be shown using the CSS property "overflow-x:scroll".

Visible column

With this setting, the corresponding column is visible in the grid. Less important content can be hidden on smaller devices. The subsequent containers close ranks so that there are not any gaps. Please note that hidden containers are still present on the device. This means that the volume of data is not reduced.

Centred column

With this setting, all containers, which are positioned in from of the centred container in the grid, maintain their position. The remaining space in the row is reserved for the centred container. The centred container is not positioned in the middle of the reserved space but rather in the horizontal middle of the entire grid. If the previous containers already take up half (or more) of the space then the centred container will be overlapped.

If other containers follow the centred container, these will be moved to the next row and placed at grid position 1. The same rule applies here as well that the last container in a row is positioned at the right-hand edge. This can be pulled across to the other containers by deactivating the "Always position last container at the right-hand edge" option.

It is generally recommended to only select the "Centred" option for a container if this is by itself in the grid but does not take up the entire 12 grid units.

Offset column

These settings make it possible to move a container to the right or left, respectively, by a certain number of grid units. The containers that follow afterwards will also be shifted.

Left padding, Right padding

If this option is not selected, the container will be displayed without left or right padding, respectively

Push / Pull column

These settings make it possible to move a container to the right or left, respectively, by a certain number of grid units. As opposed to the "Offset" setting, the containers that follow will not be shifted. The "Push" and "Pull" settings are usually only used for swapping containers of the same size. To do this, one container is given the "Push" property (shift to the right) and the second container is given the "Pull" property (shift to the left). Please note that in the case of unfavorable values for "Push" and/or "Pull", containers can overlap, which usually leads to undesirable results.

Always position last container at the right-hand edge of the grid

If this setting is not activated, the last container will be positioned directly next to the container before.


On the right-hand side of the dialog, you can see a schematic preview of the current column configuration.

Buttons in the dialog

Add column

A new container is created.

Delete column

Removes the selected container from the list

Edit column

Opens a dialog that allows you to edit the column's title.

Change order

Shifts the selected container up or down, respectively.

If a container is deleted, the elements in it will also be deleted. A corresponding notification will also be shown before deletion.

General information

More Information about responsive design can be found here.