How to align and space items in a row or column

In TeleportHQ, you arrange the items inside a row or column from the Inner Layout section of the right panel. Select the container, then pick a Direction (side by side or stacked), where items sit with Justify and Align, the space between them with Gap, and whether they move to a new line with Wrap.

Before you start#

• Select the container, not the item inside it. Inner Layout settings belong to the container and affect all its items.
• The settings apply to the screen size you are editing and all smaller ones. For example, you can switch a row of cards to a column on mobile only. See How to change styles for mobile only.

Steps#

1. On the canvas, click the container that holds the items. For example, click the row that holds three feature cards.
2. In the right panel → Visual tab, find the Inner Layout section. It comes after Size and Position.

3. If the items are not in a row or column yet, click the first icon button in the section's title row (flex). Hover the buttons to see their names: flex, grid, block.

   

4. In Direction, pick side by side (row) or stacked (column). The two reverse options show the items in the opposite order.
5. In Justify, choose where items sit along that direction: flex-start, center, flex-end, or space-between (first and last items at the edges, equal space in between).
6. In Align, choose where items sit across the other direction: flex-start, center, flex-end, or stretch (items fill the container's height in a row, or its width in a column).
7. In Gap, type the space between items. For example, type 24px, or pick a saved spacing value from the list.
8. To let items move to a new line when there isn't enough room, tick Wrap.

Hover any icon button to see the value it sets, for example center or space-between.

Examples#

• Center a button in a section: select the section. Set Justify to center and Align to center.
• Three cards with equal space between them: select the row. Set Direction to row and Gap to 32px.
• Logo on the left, menu on the right: select the header row. Set Justify to space-between.

Align one item differently from the others#

In TeleportHQ, you can override the alignment for a single item inside a row or column.

1. On the canvas, click the item, for example one card.
2. In the right panel, find the Position section.
3. In Align Self, choose flex-start, center, flex-end or stretch for this item only.
4. In Parent Order, type a number to change the item's order among its siblings. For example, type -1 to show it first.

Align Self and Parent Order show only when the item's Position is Auto, Relative or Sticky. See How to position elements.

Check that it worked#

The canvas updates as you click. Switch to a smaller screen size with the icons above the canvas to check that the layout still works on mobile.

Troubleshooting#

The Gap box is greyed out Gap can't be used together with Justify space-between. An info icon explains: "The gap input is disabled due to the container having justify-content: space-between." Pick another Justify option to use Gap again.

I clicked an option and my setting disappeared Clicking the option that is already selected clears it. Click it again to set it back.

The items don't move when I change Justify or Align Check that the container has room. If a row is exactly as wide as its items, there is no space to move them. Give the container a width, for example 100%. See How to set an element's width and height.

Stretch removed the width or height I set Choosing Align Self stretch clears the item's height (in a row) or width (in a column), so it can fill the space.

Good to know#

• Rows and columns are the same kind of container ("flexbox") pointing in different directions. Changing Direction turns a row into a column.
• Grey values in a box are inherited, for example from a larger screen size or a CSS class. Hover them to see where they come from.
• For items in cells, use a grid instead. See How to create a grid layout.