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. 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": ""
    },
    "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>