Rows

Rows is the variable-row grid block. Each row defines its own column widths — row 1 can be three equal thirds, row 2 can be one wide cell + two narrow cells, row 3 can be a single full-width cell. Build magazine-style spreads where row layouts differ.

For a uniform columns × rows layout where every row matches, use Grid instead — it's simpler.

When to use it

Magazine-style layouts where row structures differ
Hero with one big image + 3-up cards below it
Mixed-density grids (some rows tighter, some looser)
Layouts where cells need to merge across columns within a row

When not to use it

Uniform cols × rows — use Grid
Free / overlapping positioning — use Columns
Single-row stack — use Section with Direction →

Visual row editor (top of panel)

Each row appears as a horizontal strip showing its cells with percentage widths. You can:

Drag the divider between cells to resize columns within a row
Click a cell to select it (ctrl/cmd-click for multi-select)
Right-click for the context menu (add row above/below,

duplicate, delete)

Click the + button below the rows to add a new row
Click the − button on a row to remove it (only when there's

more than one row)

Each row has its own widths array — that's the entire point of this block.

Grid-level sliders

Row Gap — vertical gap between rows, 0–60px (default: 16)
Cell Gap — horizontal gap between cells in a row, 0–60px

(default: 16)

Cell Radius — 0–30px (default: 0). Rounding applied to every

cell.

Min Height — 0–900px (default: 0)
Content Gap — vertical spacing between blocks stacked inside each cell, 0–100px (default: 0). Different from Cell Gap (between cells in a row) and Row Gap (between rows) — Content Gap applies when a single cell holds multiple blocks.
Width preset — selects the grid's overall width

Box (grid-level)

Padding Sides — 0–60px (default: 0)
Padding Top — 0–60px (default: 0)
Padding Bottom — 0–60px (default: 0)
Radius — 0–30px (default: 0). Outer block radius.
Margin Top / Bottom — 0–500px (default: 0)
Depth — 0–100% (default: 0). Per-cell 3D depth wave with

mouse parallax + breathing motion (same engine as Grid).

Cell tilt — 0–100% (default: 100). Per-cell 3D rotation

toward the cursor (same engine as Grid).

Per-cell settings (click a cell to edit; ctrl/cmd-click for multi-select)

When one cell is selected, the panel shows the cell's settings. When multiple cells are selected, you can apply settings in bulk; if all selected cells are in the same row, you also see a Merge option.

Content Align — 4 toggle arrows

Two button groups (horizontal: ← / → and vertical: ↑ / ↓). Each arrow is a self-toggle — click to set, click the active one again to clear back to centre.

Background

When no image is set, a Background colour swatch is shown. A Select Image button is also visible — when an image is chosen, the colour swatch hides and the image options appear:

Image preview + Remove button
Fit — Cover · Contain · Original
Position — 9-dot anchor for image positioning

URL — text input

Wraps the entire cell in a click target.

Padding — sliders, 0–60px

Sides (horizontal padding both sides)
Top
Bottom

Row Height — slider, 60–400px

The height of the row that contains this cell. (Set on the cell; applies to its row.)

Border — collapsible section

Width — 0–10px
Colour — swatch (in the section header)
Per-side toggles for which edges show the border

Cell border radius (override)

If set, overrides the grid-level Cell Radius for this cell only.

Mobile Layout — Stack · 2 Columns · Keep (mobile tab only, default: Stack)

Visible on the Mobile tab. Forces the Rows block into a single- column stack (most common), a 2-column collapse, or to keep the desktop layout as-is.

Per-device overrides

Most grid-level settings (Row Gap, Cell Gap, Min Height, Padding, Margins, Depth, Tilt) and most per-cell settings (alignment, padding) have separate Tablet and Mobile values.

The Mobile Layout quick-switch is the recommended path for making Rows blocks work on phones.

Common patterns

Magazine spread

Row 1: one wide cell (100%) — hero image. Row 2: three cells (33/33/34) — caption + two thumbs. Row 3: single cell (100%) — related text.

Hero + 3-up cards

Row 1: 100% — hero image with overlay text. Row 2: 33/33/34 — three feature cards.

Asymmetric two-column layout

Row 1: 60/40 — image left, text + button right. Row 2: 40/60 — text + button left, image right. Alternates well for storytelling sections.

Don't

Don't use Rows when every row has the same column count —

Grid is simpler.

Don't pile lots of small rows when a Grid (with rotated/scaled

cells) gives the same effect — fewer settings to manage.

Don't expect cells to merge across rows — merging only works

within a single row (selected cells must share the row).

Don't set cell URLs AND wrap the cell content in a Button — the

outer link captures the inner click; one or the other.

blocks/grid — for uniform cols × rows
blocks/columns — for absolute-positioned children
blocks/section — wrapper for Rows blocks
concepts/responsive-overrides — per-device columns, gaps,

mobile layout