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 set up the grid container
3. How to define the grid items
4. 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 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 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 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.

Updated on: 28/03/2025