layout
Computes on-canvas coordinates (top/left/width/height) for a group of elements on both breakpoints. Modes: 'center' (one box centered on the canvas), 'row' (N boxes in a centered horizontal row on desktop, stacked into one column on…
Instructions
Computes on-canvas coordinates (top/left/width/height) for a group of elements on both breakpoints. Modes: 'center' (one box centered on the canvas), 'row' (N boxes in a centered horizontal row on desktop, stacked into one column on mobile), 'grid' (N uniform cells in cols columns, stacked on mobile), 'stack' (a vertical list down the content column). Respects the page margins (content column 80–880 on desktop and 20–400 on mobile by default). Returns one box per item in input order, plus notes for off-canvas or over-wide inputs. Pure computation: no credentials, no network.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| gap | No | Horizontal gap between row/grid items (px). Default 24. | |
| top | No | Desktop start y inside the section (px). Default 0. | |
| cols | No | Grid columns. Default min(itemCount, 3). | |
| mode | Yes | Layout pattern. center=one box; row=horizontal row (stacks on mobile); grid=cols×rows (stacks on mobile); stack=vertical list. | |
| align | No | Horizontal alignment of the block within the canvas. Default center. | |
| count | No | Uniform shortcut: number of identical boxes (use with itemWidth/itemHeight). | |
| items | No | Explicit per-item sizes in order (row/stack may vary sizes). Provide this OR count+itemWidth+itemHeight. | |
| rowGap | No | Vertical gap between grid rows / stacked items (px). Default = gap. | |
| itemWidth | No | Uniform item width (with count). | |
| mobileTop | No | Mobile start y (px). Default = top. | |
| itemHeight | No | Uniform item height (with count). | |
| canvasMobile | No | Mobile canvas width. Default 420 (use 360 to match a narrow design). | |
| marginMobile | No | Mobile page margin / content inset. Default 20. | |
| canvasDesktop | No | Desktop canvas width. Default 960 (use 1200 for wide pages). | |
| marginDesktop | No | Desktop page margin / content inset. Default 80. | |
| mobileItemWidth | No | Stacked-mobile item width (row/grid). Default = mobile content width. |