# 3 Columns

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F4C5OrXSF9xiDTm0XV4WF%2Fimage.png?alt=media&#x26;token=50f88506-6f81-4af3-8e6e-54c0c8f3e23a" alt="" width="66"><figcaption><p>3 Columns Element</p></figcaption></figure></div>

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

{% hint style="info" %}
NOTE: The 3 Columns element has options preset to show the three 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.
* 3 [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 three 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.