Layout Row
Last updated
Last updated
The Layout Row element is used to create horizontal groups of elements inside a .
The column grouping inside a row can be controlled in two ways or modes:
Default mode: Specify the width on each layout column
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.
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.
The possible values are:
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.
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.
Column Layout FormatFor 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.
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.
In this mode the number of columns shown in a horizontal group is determined by the layout column's Column Width setting. See for more details.
The settings for this element are described below:
This setting has support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting.
Default: Same as Left or Right depending on the of the user.
This setting has support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting.
You can override this setting for a specific using its setting.
Allows you to specify the column grouping at the row itself. Works best when used in conjunction with the value of Default for the setting of the l.
This setting has 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 either Default or the number of columns with a maximum of 12. Setting the value to Default will make the browser render the based on their individual setting.
You can further customize via or the .
