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.
How to create a grid
How to set up the grid container
How to define the grid items
How to make the grid responsive
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
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
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
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 create a grid
How to set up the grid container
How to define the grid items
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: 19/03/2025
Thank you!