Grid

Field-level catalog tables below stay in English — they match the machine design schema used by the editor, API, and MCP.

Decoration and visibility use Decoration & visibility (BlockShell).

Preferred CSS grid for slot children (no cells array). Editor gridLayout writes columns/gaps/alignment per breakpoint. Items control writes itemOrderByChildId, columnSpanByChildId, and rowSpanByChildId keyed by child block id. Prefer over legacy GridBlock for new designs (including email chrome). Email approximates column spans in tables and ignores CSS order / rowspan.

Fields

gridLayout

Editor-only control — does not persist its own value.

Editor-only control. Persists columnsByBreakpoint, columnGapByBreakpoint, rowGapByBreakpoint, and alignment maps — not a stored gridLayout string.

columnsByBreakpoint: { desktop: 3 }
columnGapByBreakpoint: { mobile: 16, desktop: 24 }
rowGapByBreakpoint: { mobile: 16, desktop: 24 }

itemsEditor

Editor-only control — does not persist its own value.

Editor-only Items control. Writes itemOrderByChildId, columnSpanByChildId, rowSpanByChildId.

itemOrderByChildId: { "HeadingBlock-1": { desktop: 1 } }
columnSpanByChildId: { "HeadingBlock-1": { desktop: 2 } }
rowSpanByChildId: { "HeadingBlock-1": { desktop: 1 } }

layout

itemOrderByChildId

Map of child block id → breakpoint id → CSS order. Web-only.

layout: {
  itemOrderByChildId: { "HeadingBlock-1": { mobile: 2, desktop: 0 } }
}

columnSpanByChildId

Map of child block id → breakpoint id → column span (1–12).

layout: {
  columnSpanByChildId: { "HeadingBlock-1": { desktop: 2 } }
}

rowSpanByChildId

Map of child block id → breakpoint id → row span (1–12). Web-only.

layout: {
  rowSpanByChildId: { "HeadingBlock-1": { desktop: 2 } }
}

<details><summary>Default props</summary>

{
  "shell": {
    "visibility": {
      "authVisibility": "all",
      "routeLockVisibility": "all",
      "roleVisibility": [],
      "entryActionVisibility": "all",
      "queryPageVisibility": "all",
      "hideWhenEmpty": ""
    },
    "anchor": {
      "anchorId": "",
      "anchorKey": ""
    },
    "customizeEnabled": false,
    "spacing": {
      "padding": {
        "value": "none",
        "enabled": false
      },
      "margin": {
        "enabled": false
      }
    },
    "box": {
      "enabled": false
    },
    "background": {
      "enabled": false,
      "width": "page",
      "kind": "solid",
      "solid": {
        "color": {
          "light": "",
          "dark": ""
        }
      },
      "gradient": {
        "angle": 180,
        "type": "linear",
        "colors": [
          {
            "light": "",
            "dark": "",
            "offset": 50
          },
          {
            "light": "",
            "dark": "",
            "offset": 50
          }
        ],
        "color1Light": "",
        "color1Dark": "",
        "color2Light": "",
        "color2Dark": ""
      },
      "image": {
        "src": "",
        "mode": "cover",
        "repeatSize": 100,
        "position": "center"
      },
      "motion": {
        "enabled": false,
        "directionDeg": 0,
        "speed": 20,
        "rotateDegPerSec": 0,
        "animationMode": "particle"
      },
      "video": {
        "src": "",
        "source": "file",
        "youtubeUrl": "",
        "fit": "cover",
        "loop": true,
        "repeatSize": 100
      },
      "particles": {
        "shape": "circle",
        "svgSrc": "",
        "colorMode": "solid",
        "colorLight": "#ffffff88",
        "colorDark": "#ffffff66",
        "size": 12,
        "jitter": 0.2,
        "count": 40,
        "lifetimeSec": 4,
        "speed": 40,
        "animType": "fade",
        "fromSide": "left",
        "toSide": "right"
      },
      "grid": {
        "style": "cells",
        "motionDirectionDeg": 0,
        "motionSpeed": 0,
        "rotateDegPerSec": 0,
        "hoverGrowLimitPct": 50,
        "hoverRotateLimitDeg": 0,
        "reactionTimeSec": 1,
        "hoverGrow": true,
        "hoverRotate": false,
        "hoverColor": false,
        "hoverColorLight": "#ffffff55",
        "hoverColorDark": "#ffffff33",
        "reactionSpeed": 1
      },
      "backdrop": {
        "enabled": false,
        "blurPx": 0,
        "brightness": 1,
        "contrast": 1,
        "saturate": 1,
        "grayscale": 0,
        "sepia": 0,
        "hueRotateDeg": 0
      }
    },
    "pointerEvents": "auto",
    "effects": {
      "enabled": false,
      "opacity": 1,
      "blurPx": 0,
      "brightness": 1,
      "contrast": 1,
      "saturate": 1,
      "grayscale": 0,
      "sepia": 0,
      "hueRotateDeg": 0,
      "dropShadowOffsetX": 0,
      "dropShadowOffsetY": 0,
      "dropShadowBlur": 0,
      "dropShadowColorLight": "",
      "dropShadowColorDark": "",
      "mixBlendMode": "normal"
    },
    "animation": {
      "scroll": {
        "enabled": false,
        "type": "fadeIn",
        "duration": 600,
        "delay": 0
      },
      "tilt": {
        "enabled": false,
        "intensity": 12
      },
      "wander": {
        "enabled": false,
        "speed": 40,
        "jitter": 40,
        "turnRadius": 50,
        "turnSmoothness": 40,
        "limits": "parent"
      },
      "transform": {
        "enabled": false,
        "rotateX": 0,
        "rotateY": 0,
        "rotateZ": 0,
        "translateX": 0,
        "translateY": 0,
        "translateZ": 0,
        "scale": 1
      }
    }
  },
  "appearance": {
    "border": {
      "enabled": false,
      "style": "solid",
      "colorLight": "",
      "colorDark": ""
    },
    "shadow": {
      "enabled": false,
      "valueLight": "",
      "valueDark": ""
    }
  },
  "content": [],
  "layout": {
    "columnGapByBreakpoint": {
      "mobile": 16,
      "desktop": 16
    },
    "rowGapByBreakpoint": {
      "mobile": 16,
      "desktop": 16
    },
    "justifyItemsByBreakpoint": {
      "mobile": "start",
      "desktop": "start"
    },
    "alignItemsByBreakpoint": {
      "mobile": "start",
      "desktop": "start"
    },
    "justifyContentByBreakpoint": {
      "mobile": "start",
      "desktop": "start"
    },
    "alignContentByBreakpoint": {
      "mobile": "start",
      "desktop": "start"
    }
  }
}

</details>