Using the Grid Layout

The grid layout system lets you divide a step into sections and place components precisely where you want them.

Without a grid, components stack vertically from top to bottom. The grid lets you break out of that flow and place content side-by-side, create asymmetric layouts, or build structured multi-column designs.

Enabling grid layout

Select a step and toggle Grid Layout in the step settings panel. This switches the step’s content area from a stacked layout to a grid canvas.

How the grid works

The step is divided into a 12-column, 12-row grid. When you draw a cell, you specify which columns and rows it occupies. Cells can span any number of columns or rows — a cell that spans all 12 columns fills the full width, while a cell spanning 6 columns takes up half.

You can draw as many cells as you need. Cells can’t overlap, so the layout remains predictable.

Drawing cells

In grid layout mode, click and drag on the canvas to draw a cell. Release to place it. The cell snaps to the grid so dimensions are always clean fractions of the step width and height.

After drawing, you can drag the edges of a cell to resize it or drag the cell itself to reposition it.

Adding content to cells

Once a cell exists, drag components into it from the sidebar just as you would on a regular step. Multiple components can go inside the same cell — they stack vertically within the cell.

Gap and border options

Select a cell to open its style options:

• Gap — Controls the space between cells. Increase it to add breathing room between columns or rows.
• Border — Add a visible border to a cell. You can set the color, width, and which sides show the border.

Borders are useful for visually separating sections of a step without needing extra components.

AI-generated layouts

You can ask the AI assistant to create a grid layout for you. Describe the structure you want — “two columns, left side image right side text” or “header row then three equal columns” — and the AI will draw the cells and populate them with components.

This is faster than drawing cells manually when you have a clear layout in mind.

Nesting grids

You can place a Grid Layout component inside a grid cell to create nested grids. This lets you build complex layouts where one section of a step has its own internal column structure.

Nesting is powerful but adds complexity — use it when you need a layout that a single flat grid can’t express.