Grid properties - Column configuration tab
The following settings are ignored if the setting "Same container height"
is activated on the General tab:
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.
- Always position last container at the right-hand edge of the grid
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.
By double-clicking on the name of a container, a dialog will open that allows you to modify the container name.
Click in this column to select the desired value from a list. Further information about this setting can be found here
If a container's content is provided with a specific width which
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".
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 same amount of data is transferred.
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.
Of 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 recommened 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.
These settings enable you to shift a container to the right by a defined
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
These settings enable you to shift a container to the right or left, respectively,
by a defined 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 containers can overlap
if incorrecet values for "Push" and/or "Pull" are entered; this usually needs to
Always position last container at the right-hand edge
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
A new column is created.
Removes the selected column from the list
Opens a dialog
that allows you to edit the column's title.
Shifts the selected column up or down, respectively.
If a column is deleted, the elements contained within will also be deleted. A corresponding notification will also be shown before deletion.