# 2 Columns

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FYiehHbioswB2k8tTmioZ%2Fimage.png?alt=media&#x26;token=38b2e9aa-27c9-4823-bd26-bbd61a77410a" 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](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-container)&#x20;
* 1 [Layout Row](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-row) inside the layout container.
* 2 [Layout Column](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-column) 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](https://docs.zingy.ai/app-editor/page-element-settings#custom-css-classes) setting. For more information on adjusting the spacing see [Padding and Margin](https://docs.zingy.ai/app-editor/page-editor/padding-and-margin).

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](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/add-column) Element.
* [Cloning](https://docs.zingy.ai/app-editor/working-with-page-elements#clone-the-selected-element) one of the existing layout columns.

Additional rows can also be added by [cloning](https://docs.zingy.ai/app-editor/working-with-page-elements#clone-the-selected-element) the existing layout row.