Grid

Aşağıdaki alan düzeyi katalog tabloları İngilizce kalır — düzenleyici, API ve MCP’nin kullandığı makine tasarım şemasıyla birebir uyumludur.

Decoration and visibility use Dekorasyon ve görünürlük (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>