How layout works: rows, columns and grids
In TeleportHQ, you build the structure of a page from containers. A Row puts the elements inside it side by side. A Column stacks them from top to bottom. A Grid arranges them in rows and columns of cells, like a table. You can switch any container between these layouts later, in the Inner Layout section of the right panel.
The layout elements
You find the TeleportHQ layout elements in the left sidebar → Elements → Primitives tab → Layout group.
| Element | What you get | Shortcut |
|---|---|---|
| Row | A container as wide as its parent that places its contents side by side. | R |
| Column | A container 200px wide that stacks its contents vertically. | C |
| Grid | A container with 2 equal columns. You add more rows and columns later. | none |
| Separator | A thin horizontal line, to divide sections. It can't hold other elements. | none |
| Card rail | A ready-made section: a heading and a row of five cards that scrolls sideways. Its parts are ordinary elements you edit like any other. | none |
To add one, drag it onto the canvas, or select a container and click the card. To use a shortcut, select a container and press the key. The new Row or Column goes inside it.
A new, empty Row or Column shows a dashed grey border so you can see it. The border goes away when you put the first element inside.
Rows and columns: side by side or stacked
Rows and columns in TeleportHQ are the same kind of container, pointed in a different direction. The web calls this "flexbox". Inside a row or column you control:
- Direction: side by side or stacked.
- Justify and Align: where the items sit, for example centered.
- Gap: the space between items.
- Wrap: whether items move to a new line when there isn't enough room.
Most containers on a page are rows or columns. For example, a hero section is often a column (heading, text, button stacked), and a feature strip is a row of three cards. Learn how in How to align and space items in a row or column.
Grids: rows and columns at the same time
A TeleportHQ grid places items in cells. Use a grid when items must line up in both directions, for example a gallery of 6 photos in 3 columns, or a pricing table. You set the number of columns in the right panel, and place each item with its Row and Column settings. See How to create a grid layout.
Switch a container's layout (Inner Layout)
Every TeleportHQ container can change its layout without being re-added.
- Select the container on the canvas.
- In the right panel → Visual tab, find the Inner Layout section. It comes after Size and Position.
- In the section's title row, click one of the three icon buttons: flex (row or column), grid, or block. Hover a button to see its name.
Block means no special layout: elements stack in the normal way and there are no extra settings. When you switch type, TeleportHQ remembers the old settings and restores them if you switch back.
Dragging elements builds layout for you
When you drag an element in TeleportHQ, the editor often creates the layout for you:
- Drop an element into an empty row or column at a spot, for example bottom right. The container's alignment is set to match.
- Drop an element to the left or right of an element that sits in a column. The two are wrapped in a new row. A grey outline shows the row that will be created.
- Hold Ctrl (Cmd on Mac) while dragging to drop inside an element instead of next to it.
See How to move and rearrange elements by dragging.
Size, spacing, position and visibility
Once the structure is in place, you fine-tune each element in TeleportHQ with these guides:
- How to align and space items in a row or column
- How to create a grid layout
- How to position elements (Auto, Relative, Freestyle, Fixed, Sticky)
- How to make a header stay on screen when scrolling
- How to set an element's width and height
- How to add space around and inside elements
- How to hide an element
Good to know
- Layout settings apply to the screen size you are editing and all smaller ones. This lets you show three cards in a row on desktop and stack them on mobile. See How to make your site look good on phones and tablets.
- The right panel lists an element's sections in the same order every time. The layout sections come in this order: Size, Position, Inner Layout, Margin, Padding, and further down Visibility.
- To make any container's contents scroll sideways, like the Card rail, select the container and turn on Scroll sideways in its Scroll behavior section. Then choose Snap items, Scroll with the wheel and Hide scrollbar.
- To see the boxes that make up your page, turn on Grayscale Structure Mode.
- To change a container's HTML tag (for example from
divtosection), use the Attributes section of the right panel.