Grid

A grid arranges children into cells. Three layout modes:

Grid — strict columns × rows; each child fills its cell
Masonry — fixed columns, variable cell heights (Pinterest-style)
Auto-fit — flex layout that reflows based on cell minimums

Each cell has its own settings (background, padding, alignment, rotation, scale, border) — Click a cell in the canvas to edit just that cell's settings.

The grid also supports two grid-level 3D effects: Depth (mouse parallax + breathing motion across all cells) and Cell tilt (per- cell 3D rotation toward the cursor).

When to use it

A row of equal-width feature cards
Image gallery (use Fill from Library to bulk-populate)
Pricing card row (per-cell backgrounds + alignment)
Masonry layout for variable-height content
Editorial layouts with rotated / scaled cells

When not to use it

Free-form / overlapping layouts — use Columns
Single-row horizontal stack with arbitrary widths — use a

Section with Direction →

Top of panel

Fill from Library — button

Bulk-populates the grid with image cells. Useful when starting a gallery from existing media.

Layout

Layout mode — button group: Grid · Masonry · Auto-fit (default: Grid)

Switches the grid engine.

Columns — button group: 1–6 (default: 2)

Number of columns. (Hidden in Auto-fit mode — columns are auto-derived there.)

Rows — button group: 1–6 (default: 2)

Number of rows. Hidden in Masonry (column-flow doesn't have a row count) and Auto-fit.

Auto-fit only — Direction · Justify · Align · Wrap

When Layout mode is Auto-fit, the column/row pickers disappear and four flex controls appear:

Direction — Horizontal (row) / Vertical (column)
Justify — Start / Center / End / Between
Align — Stretch / Start / Center / End
Wrap — No Wrap / Wrap

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

Visible only when the device tab is on Mobile. Forces the grid into a single-column stack, two-column collapse, or "keep desktop layout" on mobile.

Grid-level sliders

Gap H — horizontal gap between cells, 0–300px (default: 20)
Gap V — vertical gap, 0–300px (default: 20)
Min Height — 0–900px (default: 0)
Content Gap — vertical spacing between blocks stacked inside each cell, 0–100px (default: 0). Per-cell override available (the cell's own Content Gap slider in per-cell settings).
Width preset — selects the grid's width inside the parent
Margin Top / Bottom — 0–500px (default: 0)
Depth — 0–100% (default: 0). Per-cell 3D depth wave with

mouse parallax + breathing motion. Hover a cell to fly it forward.

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

toward the cursor. Independent of Depth — keeps content sharp / readable while cells follow the cursor. Set to 0 to disable.

Entrance animation

Shared widget — preset, duration, delay for scroll-into-view.

Per-cell settings (click a cell to edit)

When a cell is selected in the canvas, the panel shows CELL Rr Cc as a header, then the cell's own settings.

Cell Background

bg colour swatch (cell_bg_X)
gradient end swatch (cell_bg_gradient_to_X) — when set, the

cell renders as a gradient from bg → end

BG Angle — 0–360° (default: 135). Gradient angle.
BG Mouse — 0–100% (default: 0). Mouse-driven rotation of the

gradient angle.

Cell layout sliders

Rotate — −10 to 10° (default: 0). Subtle editorial rotation.
Scale — 70–130% (default: 100). Subtle editorial scale.
Padding H — 0–100px (default: 0). Inner horizontal padding.
Padding V — 0–100px (default: 0). Inner vertical padding.
Content Gap — 0–100px (default: 0). Vertical spacing between this cell's child blocks. Overrides the grid-level Content Gap default.

Content Align — 4-arrow cluster

Two button groups (horizontal align: ← / centre / → and vertical align: ↑ / centre / ↓). Click an arrow to set; click the active arrow again to clear back to centre.

Cell border

A separate sub-section below the alignment cluster. Border width, colour, and per-side toggles (top, right, bottom, left).

Per-device overrides

Most settings (Gap H/V, Min Height, Margins, Depth, Tilt) have separate Tablet and Mobile values. Per-cell alignment also has device-specific keys (cell_halign_X_tablet, etc.).

The dedicated Mobile Layout control is a quick path to a single- column stack on mobile without overriding individual cells.

Common patterns

3-card feature row

Layout mode Grid · Columns 3 · Rows 1 · Gap H 24 · Mobile Layout Stack.

4-up logo grid

Layout mode Grid · Columns 4 · Rows 1 · Gap H 32 · Min Height 80 · Mobile Layout 2 Columns.

Image masonry

Layout mode Masonry · Columns 3 · Gap H/V 16 · use Fill from Library to populate.

Depth wave

Layout mode Grid · Columns 4 · Rows 2 · Depth 60% · Cell tilt 80% — cells respond to cursor as a wave.

Editorial card row with rotation

Layout mode Grid · per cell: Rotate ±5° (alternating) · Scale 95–105 · per-cell BG colours.

Don't

Don't use Auto-fit when you need exact column counts at specific

breakpoints — Auto-fit reflows by content width, not your design intent.

Don't pile Depth + Cell tilt at 100% on text-heavy cells —

readability suffers.

Don't use Masonry for content that should align across rows —

it can't (Masonry is column-flow, not grid-aligned rows).

blocks/rows — alternative grid block (audit pending — until

audited, prefer Grid for most use cases since per-cell styling lives here)

blocks/columns — for absolute-positioned children
blocks/section — wrapper for grids
concepts/responsive-overrides — per-device columns, gaps, mobile

layout

recipes/feature-grid — 10-card responsive feature deck

Gotchas

**The Grid panel's "Content width" slider writes to width_pct, not

content_width.** That's because two different block panels share the same visible label: the Section panel's "Content Width" slider writes to content_width, while the Grid / Cell grid / Freeform panels' "Content width" slider writes to width_pct (legacy key name). They look identical in the UI but the underlying keys differ. When generating settings for a grid, write width_pct. Clear any stale content_width value found on a grid — the resolver ignores it and stale values left on copied data confuse future maintenance.

**Setting section_max_width on inner flip-boxes caps the card on

every device.** Leave at 0 / leave unset, let the grid's columns drive width per device.