Layout Row
Last updated
Last updated
The Layout Row element is used to create horizontal groups of Layout Column elements inside a Layout Container.
The only element that can be added to a layout row is a Layout Column.
The column grouping inside a row can be controlled in two ways or modes:
Default mode: Specify the width on each layout column
In this mode the number of columns shown in a horizontal group is determined by the layout column's Column Width setting. See Layout Column for more details.
The Column Layout Format setting
In this mode, you can set the desired number of rendered columns in a horizontal group at the layout row. See below for more details.
NOTE: Each Layout Row will begin a new horizontal group of columns.
The Options tab settings for this element are described below:
Horizontal AlignControls how the layout columns are spaced horizontally.
This setting is only effective if all the columns together do not occupy the full horizontal width. e.g. a layout row with two columns each set for 25% width. In this case this setting can be used to control how the remaining 50% width is used.
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: Same as Left or Right depending on the locale of the user.
Left: Aligns the layout columns inside the layout row towards the left.
Center: Aligns the layout columns inside the layout row towards the center.
Right: Aligns the layout columns inside the layout row towards the right.
Space Around: Equally distribute the available space before and after each column.
Space Between: Distribute the available space between the columns.
Vertical AlignControls how the columns are spaced vertically.
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: Equalizes the height of all the columns.
Top: Align the top of the columns together at the top of the row.
Center: Align the center of the columns together at the center of the row.
Bottom: Align the bottom of the column together at the bottom of the row.
You can override this setting for a specific Layout Column using its Vertical Align setting.
Column Layout FormatAllows you to specify the column grouping at the row itself. Works best when used in conjunction with the value of Default for the Column Width setting of the layout columns.
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.
For this setting, the Default value is considered an override for the Desktop, Tablet and Mobile screen sizes. Hence you need to set this explicitly for all screen sizes.
The possible values are either Default or the number of columns with a maximum of 12. Setting the value to Default will make the browser render the columns based on their individual Column Width setting.
GuttersControls the gutters or padding between the columns.
The possible values are:
Default: a 15px padding is added on the left and right of columns.
The example below shows a row with two columns each having an image. The padding between the columns is seen for both.
None: The columns are rendered without any padding.
The example below shows the same row as above, but this time with the setting value as None. No padding is visible between the columns.
You can further customize via Custom CSS Classes or the Design Tab.
