# 2 Columns

<div align="left"><figure><img src="/files/84Cbwx2NMUqHhFw39JeX" alt="" width="66"><figcaption><p>2 Columns Element</p></figcaption></figure></div>

The **`2 Columns`** element provides a quick way to add a full width two column layout to your page.

{% hint style="info" %}
NOTE: The 2 Columns element has options preset to show the two columns for desktop screen sizes and a single column for all other screens.
{% endhint %}

This is a composite element made up of the following elements:

* 1 [Layout Container](/app-editor/page-editor/built-in-elements/layout-container.md)&#x20;
* 1 [Layout Row](/app-editor/page-editor/built-in-elements/layout-row.md) inside the layout container.
* 2 [Layout Column](/app-editor/page-editor/built-in-elements/layout-column.md) elements inside the layout row.
* Example Text elements inside the layout columns.

The following element options options are preset:

* Layout Container set for full-width
* Layout Row set to center align horizontally and vertically.
* Layout Columns are set to use 100% width at the main setting and overridden to *Default* for the desktop screen size. So this will show a two column view for desktop and single column view for all other screen sizes.
* Layout Columns have a margin at the bottom by using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings.md#custom-css-classes) setting. For more information on adjusting the spacing see [Padding and Margin](/app-editor/page-editor/padding-and-margin.md).

Feel free to change the preset options and delete the example Text elements.

You may also add additional columns to the layout row by:

* Using the [Add Column](/app-editor/page-editor/built-in-elements/add-column.md) Element.
* [Cloning](/app-editor/page-editor/working-with-page-elements.md#clone-the-selected-element) one of the existing layout columns.

Additional rows can also be added by [cloning](/app-editor/page-editor/working-with-page-elements.md#clone-the-selected-element) the existing 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/2-columns.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.
