Docs Block Reference Columns

Columns

Freeform is a column-based grid block. Each column has its own width (set as a percentage) and its own list of cells. Different columns can have different cell counts — column 1 could be one big cell, column 2 could be three stacked cells, column 3 could be two cells with images.

This is the third grid block in Instinctor:

  • Grid — uniform cols × rows (every row has the same column

    • layout)

  • Rows — variable rows; each row defines its own widths
  • Columns — variable columns; each column defines its own

    • cells

Pick Freeform when columns are the natural unit (sidebar layouts, column-flow content) instead of rows.

> Note: despite the name, Freeform is not absolute / x-y > positioning. It's a structured column grid with variable cells > per column.

When to use it

  • Sidebar layouts (one tall column + one column with stacked

    • blocks)

  • Column-flow magazine spreads
  • Asymmetric content where columns differ in cell count

When not to use it

  • Uniform cols × rows — use Grid
  • Variable-row layouts (each row has different widths) — use

    • Rows

  • Single-row stack — use Section with Direction →

Visual layout editor (top of panel)

Each column appears as a vertical stack. Above each column is an editable percentage chip showing its width — click and type a new percentage to resize.

Inside each column you see its cells stacked. Cells with content look "filled," empty cells look hollow.

Controls:

  • Click a cell to select it (the panel below shows that cell's

    • settings)

  • Drag a filled cell to move it
  • + inside a column — add a cell at the end of that column
  • + at the right edge — add a new column
  • × on a column header — remove the column (only when there's

    • more than one)

  • × on a cell — remove the cell (only when the column has more

    • than one)

Grid-level sliders

  • Column Gap — horizontal gap between columns, 0–60px (default: 16)
  • Cell Gap — vertical gap between cells in a column, 0–60px

    • (default: 16)

  • Min Height — 0–600px (default: 200)
  • Content Gap — vertical spacing between blocks stacked inside each cell, 0–100px (default: 0). Different from Column Gap (between columns) and Cell Gap (between cells inside a column) — Content Gap applies when a single cell holds multiple blocks.
  • Cell Radius — 0–30px (default: 0)
  • Width preset — selects the grid's overall width

Box (grid-level)

  • Padding Sides / Top / 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.

Per-cell settings (click a cell to edit)

When a cell is selected, the panel header shows Cc Rr (column + row index). Below that:

Content Align — 4 toggle arrows

Two button groups (horizontal: ← / → and vertical: ↑ / ↓). Each arrow self-toggles — click again to clear back to centre.

Background

When no image is set: a Background colour swatch + Select Image button. When an image is chosen, the colour swatch hides and these appear:

  • Image preview + Remove button
  • Fit — Cover · Contain · Original
  • Position — Top · Center · Bottom (3-button group)

Link URL — text input

Wraps the cell in a click target.

Padding — sliders, 0–60px

  • Sides — horizontal padding both sides
  • Top
  • Bottom

Border (collapsible)

  • Width — 0–10px
  • Colour — swatch (in section header)

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

Visible on the Mobile tab. Forces the Freeform layout into a single-column stack, two-column collapse, or kept as desktop.

Per-device overrides

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

Common patterns

Sidebar + main column

Two columns: 30/70 widths. Left column: one cell holding nav. Right column: multiple cells holding content.

Three-column varied content

Column 1 (33%): one tall cell with hero image. Column 2 (33%): three stacked cells with cards. Column 3 (34%): two cells — testimonial + CTA.

Asymmetric grid

Column 1 (60%): one cell. Column 2 (20%): two cells. Column 3 (20%): three cells. Magazine-spread feel.

Related

  • blocks/grid — uniform cols × rows
  • blocks/rows — variable rows
  • blocks/section — wrapper for grids
  • concepts/responsive-overrides — per-device columns, gaps,

    • mobile layout