Mercury Documentation

New layout row for 3 columns with individually adjustable column widths

With the new three-column layout row, differently wide content can be arranged side by side. Several ready-made divisions are available for this purpose. Custom divisions are also possible.

Previously, the widths of the three columns in a layout row were fixed (4-4-4). With the new layout row "Row 3 columns (adjustable widths)", the columns can be sized differently according to the content.

For example, a larger text area can be displayed next to two smaller areas with supplementary information.

On smartphones and smaller screens, the columns continue to be clearly arranged one below the other.

Two new element settings are available for designing the layout row: The width of individual columns can be determined with "Column widths".

Via "Main column position" it is specified if the most important content area is displayed on the left, in the center, or on the right.

The setting "Column widths" determines how much space the three columns receive. The numbers represent the columns from left to right.

The following configurations are predefined:

  • 6-3-3: The left column occupies half of the row. The other two columns each occupy a quarter.
  • 3-3-6: The right column occupies half of the row.
  • 3-6-3: The middle column occupies half of the row.
  • 6-4-2: The columns become progressively narrower from left to right.
  • 7-3-2: The left column receives particularly ample space.

Custom configurations can also be entered. To do so, the three numbers must be separated by hyphens. The sum of the numbers must always equal 12, for example 5-4-3 or 8-2-2. If the input is incorrect, the setting cannot be saved.

The setting "Main column position", defines which of the three columns contains the most important content: the left, middle, or right column.

The values set under "Column widths" still apply from left to right. The main column is therefore not automatically the widest. For example, with a 6-3-3 split and the selection "Middle", the main middle column is three units wide.

Note: If you later change the position of the main column, the elements it contains will move along with the column. On smartphones, the main column is displayed first by default, regardless of this setting.

To the documentation