How to create a grid layout

In TeleportHQ, a grid places items in rows and columns of cells, for example 6 photos in 3 columns. Drag a Grid element from Elements → Layout, or switch any container to grid in the Inner Layout section of the right panel. Then set the number of Rows and Columns, and place items in cells with the Row and Column settings.

Before you start#

• A new Grid element starts with 2 equal columns.
• Grid settings apply to the screen size you are editing and all smaller ones. This is how you show 3 columns on desktop and 1 on mobile (see "Make the grid responsive" below).

1. Add a grid#

Use one of these two ways in TeleportHQ:

• Add a new grid: in the left sidebar, open Elements. In the Primitives tab, drag Grid from the Layout group onto the canvas, or click it. The new grid is named Container in the label bar and the layers tree, with a grid icon.
• Turn a container into a grid: select the container. In the right panel → Visual tab → Inner Layout, click the grid icon in the section's title row (the middle of the three buttons).

2. Set the rows and columns#

1. Select the grid on the canvas.
2. In the right panel → Inner Layout, find Columns.

3. Click the gear button next to Columns (its tooltip says which mode is on, for example "Mode: Equal") and choose a mode:

   • Equal: a number of equal columns. Type 3 for 3 columns.
   • Auto Fit or Auto Fill: as many columns as fit, each at least a minimum width. Type a width in px, for example 250; the box starts at 200. Auto Fit stretches the items to fill the row. Auto Fill keeps empty column slots.
   • Custom: type the grid sizes yourself, for example 2fr 1fr.

   

4. Do the same for Rows, if you need a fixed number of rows.
5. In Justify and Align, choose how items sit inside their cells: start, center, end or stretch.
6. In Gap, type the space between cells, for example 16px.

3. Place an item precisely#

1. Select an item inside the grid.
2. In the right panel, find the Position section.
3. In Row or Column, click the gear button and pick a mode:
   • Auto: the grid places the item for you.
   • Span: the item covers a number of cells, for example 2.
   • Position: the item starts at a given line (Start) and covers a number of cells (Span).
   • Custom: type the placement yourself.
4. Use Justify Self and Align Self to align this item differently from the others.

Make the grid responsive#

1. Above the canvas, click the icon of a smaller screen size, for example the phone.
2. Select the grid.
3. Change Columns to Equal 1.

The change applies to that screen size and smaller. The desktop layout stays the same. See How to change styles for mobile only.

Check that it worked#

The canvas shows the new cells right away. Switch between screen sizes above the canvas to check each layout.

Troubleshooting#

Dropping an element into the grid doesn't put it in the cell I wanted Dragging into a grid adds the element between the existing items, in order. To choose a cell, set Row and Column in Position.

The Justify or Justify Self button I picked isn't highlighted The grid's Justify and an item's Justify Self still apply on the canvas, but the right panel doesn't highlight the button you picked. Check the result on the canvas. To undo a choice, press Ctrl+Z (Cmd+Z on Mac).

Good to know#

• The Grid card in the Elements panel shows "(G)", but the G key doesn't add a grid.