> ## 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 create Grid layouts

**A grid is a layout based on rows and columns that you can use to create more complex structures for your website. Here is a step by step guide on how to create responsive grids in TeleportHQ.**

|    |    |    |    |
| --- | --- | --- | --- |
| [1. How to create a grid](#2-how-to-create-a-grid) | [2. How to set up the grid container](#2-how-to-set-up-the-grid-container) | [3. How to define the grid items](#2-how-to-define-the-grid-items) | [4. How to make the grid responsive](#2-how-to-make-the-grid-responsive) |

## How to create a grid

There are two ways to create a grid. The easiest way is to drag and drop a grid element onto the canvas. To do so:

* Go to the **Left panel -> Elements -> Layout**
* Drag a **Grid element** onto the canvas

Alternatively you can convert any container into a grid. 

* Select the container you want to turn into a grid
* Go to the **Right panel -> Inner layout **section
* Select the **Grid icon**

![How to add a grid container to the canvas](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-grid_1upctkz.gif)

## How to set up the grid container

To help you make the necessary setup for your grid you can use our Grid helper. To enable the Grid helper:

* Select the grid element
* Click on the **Grid helper icon above the Grid container**
* Use the **+ and - ** buttons on the **Right side** and **Bottom side** of the grid container to define the number of rows and columns for your grid\

Alternatively you can add rows and columns from the **Right panel -> Inner layout** section by adding the number of columns and rows in the respective fields.

To edit the grid container:

* Select the grid element
* Go to the **Right panel -> Inner layout** section
* Change the **alignment of the items** and add a **gap** between items

![How to set up a grid container](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-grid_1lpguba.gif)

## How to define the grid items

To define how the grid items occupy the space inside of the grid container you can use the Grid helper. To do that:

* Select the grid container
* Click on the **Grid helper icon above the grid container**
* Hover the **mouse above a grid cell and click on the + button**
* Use the **arrow buttons** to expand the grid items horizontally and vertically

To edit grid items: 

* Select a **Grid item**
* Use the properties from the **Right panel** to edit it
* Add elements from the Left panel

![How to set up grid items](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-grid_6aeipd.gif)

## How to make the grid responsive

To change the layout of the grid for a different device, such as mobile: 

* From the **bar above the Canvas**, **change the media query**
* Select the grid element
* Click on the **Grid helper icon above the grid container**
* Use the arrow buttons to modify the position of the grid items

The changes will only be applied for that media query and smaller. The desktop version will remain the same.

![How to make a grid responsive](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/4-grid_hywbi4.gif)