# Layout Column

<div align="left"><figure><img src="/files/DgYwafnTCQAgoiBT7Kug" 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](/app-editor/page-editor/built-in-elements/layout-row.md) elements.
{% endhint %}

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

***

## Options

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

### `Column Width`

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

This setting has [responsive design](/app-editor/page-editor/responsive-design.md) 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](/app-editor/page-editor/responsive-design.md) 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](/app-editor/page-editor/built-in-elements/layout-row.md#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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-column.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
