> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use Layout elements; rows, columns & grids

**Containers provide the structure to any web page. Let’s find out how containers work in TeleportHQ and how to properly add other elements like images, videos or buttons to these containers.**

|    |    |
| ---- |
| [1. Container types](#2-container-types) | [2. Adding containers to the project](#2-adding-containers-to-the-project) |
| [3. Adding elements to containers](#2-adding-and-aligning-elements-in-containers) | [4. Customizing containers](#2-customizing-containers) |

## Container types

In the Left panel of the editor you will find the Layout section. From here you can add two types of flex containers: rows and columns. Both of these containers are semantically <div> HTML elements with the “display: flex;” property added by default.

| Rows | Columns | Grids |
| ---- |
| When adding a row to the canvas you will add a full-width container with a horizontal distribution of elements. Adding elements within a row will automatically set them next to each other. | Adding a column in the canvas or in another container will add a 200px wide container with a vertical distribution of elements. | Dragging a grid element will add a container with the display: grid; property. Read this article to [learn more about Customizing grids](/en/article/how-to-create-grid-layouts-1wn8bnm/). |

## Adding containers to the project

To add a row or column in the project you can either **drag and drop it directly on the canvas** or in the **treeview**, in the container of choice.

![Adding containers to the canvas](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/1-layout_1shzdhj.gif)

## Adding and aligning elements in containers

To add an element to a container simply go to the **Left side menu**, to the **Elements tab** and choose which element you want to use. Then simply drag and drop the element inside the container in a position of your choice (center, top, top left, bottom right and so on). 

To change the layout of your container you need to select it and go in the **Right side panel** to the **Inner layout** section. Here you can adjust the orientation of elements by selecting either row or column (horizontal or vertical) as well as choose how elements align next to each other and how spacing is distributed.

![Adding elements to containers with drag and drop](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/2-layout_vcxoaz.gif)

## Customizing containers

To edit any of your containers you first need to select it. You can do this either by clicking in the canvas or find it in the Layers tab. Once selected, go to the **Right side panel**. Here you will find multiple sections that you can customize. Let’s go through some of these sections:

|    |    |
| ---- |
| HTML | Change the HTML tag ( **div, article, section, aside**), add ID's or custom attributes |
| Classes | Add/remove CSS classes to your containers, or create new classes altogether |
| States | Add interaction states such as hover effects |
| Size | Change the size of containers using different units of measurement such as: px, em, rem or % |
| Position | Change the position (auto/freestyle), or if the container is a child of another flex container, the alignment of the child relative to the parent container (align-self) |
| Inner Layout | Adjust how elements and spacing is displayed inside the flex container. |

In this panel you can also find other options such as: margin, padding, visibility, shadows or z-index. 

| Learn more about Flexbox to properly leverage containers in TeleportHQ: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

![How to style containers](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/3-layout_udtt1f.gif)