# Layout Row

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FI5wpS9GnJhpjnSIjjGto%2Fimage.png?alt=media&#x26;token=ef31089d-1180-47bc-83cd-81a80b84f1f9" alt="" width="65"><figcaption><p>Layout Row</p></figcaption></figure></div>

The **`Layout Row`** element is used to create horizontal groups of [Layout Column](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-column) elements inside a [Layout Container](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-container).&#x20;

{% hint style="info" %}
The only element that can be added to a layout row is a [Layout Column](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-column).
{% endhint %}

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](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/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.

{% hint style="info" %}
**NOTE:** Each Layout Row will begin a **new** horizontal group of columns.
{% endhint %}

***

## Options

The [Options tab](https://docs.zingy.ai/app-editor/page-element-settings#options-tab) settings for this element are described below:

### `Horizontal Align`

Controls how the layout columns are spaced horizontally.&#x20;

{% hint style="warning" %}
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.
{% endhint %}

This setting has [responsive design](https://docs.zingy.ai/app-editor/page-editor/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](https://developer.mozilla.org/en-US/docs/Glossary/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 Align`

Controls how the columns are spaced vertically.

This setting has [responsive design](https://docs.zingy.ai/app-editor/page-editor/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.&#x20;

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.

{% hint style="info" %}
You can override this setting for a specific [Layout Column](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-column) using its [Vertical Align](https://docs.zingy.ai/app-editor/page-editor/layout-column#vertical-align) setting.
{% endhint %}

### `Column Layout Format`

Allows 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*](https://docs.zingy.ai/app-editor/page-editor/layout-column#column-width) setting of the l[ayout columns](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-column).

This setting has [responsive design](https://docs.zingy.ai/app-editor/page-editor/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.&#x20;

{% hint style="warning" %}
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.
{% endhint %}

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](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-column) based on their individual [*Column Width*](https://docs.zingy.ai/app-editor/page-editor/layout-column#column-width) setting.

### `Gutters`

Controls 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.

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FyKwaSKNZB0RoWLRBz4hv%2Fimage.png?alt=media&#x26;token=0d4b9368-f8de-4ebf-84f2-da3d479ae476" alt=""><figcaption></figcaption></figure>

* 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.

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FWmnFbATgCHEmsKsRvQJQ%2Fimage.png?alt=media&#x26;token=f03a38a7-3a1c-49b3-9353-85adb2dc6f34" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can further customize via [Custom CSS Classes](https://docs.zingy.ai/app-editor/page-element-settings#custom-css-classes) or the [Design Tab](https://docs.zingy.ai/app-editor/page-element-settings#design-tab).
{% endhint %}