Layout Column
Last updated
Last updated
The Layout Column element is used to divide the horizontal space within a row and create responsive grid layouts.
The layout columns can only be added inside Layout Row elements.
Within the layout column element, you have the freedom to effortlessly drag and drop various elements such as Image, Alert, Badged Text, Link, Text, Heading, Flexible Area, Button, etc. However, it's important to note that certain elements may have specific restrictions. For instance, a Table Column Cell can only be added to a Table Row, adhering to its designated usage.
The Options tab settings for this element are described below:
Column WidthSets the width of the layout column.
This setting has responsive design support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting.
The possible values are:
Inherit: As the name suggests, when this option is used the column width is inherited from either the setting for a smaller screen size (if valid) or the main setting.
Default: Automatically set the column width equally based on the number of columns. e.g. if there are 4 columns, each column occupies 25% of the width.
Auto: Automatically set the column width based on the natural width of the content inside.
Percentage Value: Set the column width based on a percentage of the container width.
Horizontal AlignControls how the content inside the layout column is aligned horizontally.
This setting has responsive design support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting.
The possible values are:
Default: Inherit from parent element.
Left: Aligns the content towards the left.
Center: Aligns the content towards the center.
Right: Aligns the contents towards the right.
Vertical AlignControls how the column is spaced vertically within the layout row. This setting will override the enclosing Layout Row's Vertical Align setting for this specific column.
The possible values are:
Default: Follow the Vertical Align setting of the enclosing layout row.
Top: Align the top of the column at the top of the enclosing layout row.
Center: Align the center of the column at the center of the enclosing layout row.
Bottom: Align the bottom of the column at the bottom of the enclosing layout row.
