# Layout Column

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F3hWt8fmcNlB57RuhQpwZ%2Fimage.png?alt=media&#x26;token=5257168c-1fae-47bd-8533-bd4f6da8b0ec" alt="" width="71"><figcaption><p>Layout Column</p></figcaption></figure></div>

The **`Layout Column`** element is used to divide the horizontal space within a row and create responsive grid layouts.

{% hint style="info" %}
The layout columns can only be added inside [Layout Row](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-row) elements.
{% endhint %}

Within the layout column element, you have the freedom to effortlessly drag and drop various elements such as [Image](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/image), [Alert](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/alert), [Badged Text](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/badged-text), [Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/link), [Text](https://docs.zingy.ai/app-editor/editing-text#text), [Heading](https://docs.zingy.ai/app-editor/editing-text#heading), [Flexible Area](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/flexible-area), [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button), etc. However, it's important to note that certain elements may have specific restrictions. For instance, a [Table Column Cell](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/table-column-cell) can only be added to a [Table Row](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/table-row), adhering to its designated usage.

***

## Options

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

### `Column Width`

Sets the width of the layout column.&#x20;

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:

* 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.&#x20;
* 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.&#x20;

### `Horizontal Align`

Controls how the content inside the layout column is aligned horizontally.

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: 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 Align`

Controls how the column is spaced vertically within the layout row. This setting will override the enclosing [Layout Row's Vertical Align setting](https://docs.zingy.ai/app-editor/page-editor/layout-row#vertical-align) 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.