layout
Computes exact on-canvas coordinates for elements in center, row, grid, or stack layouts, handling both desktop and mobile breakpoints automatically. Drop the results into your responsive styles.
Instructions
Computes EXACT on-canvas coordinates (top/left/width/height) for a group of elements, for BOTH breakpoints, following the guide's layout math — so you NEVER hand-compute left/top (the #1 source of off-center defects) or write a script to do it. Drop the returned boxes straight into each element's responsive..styles (results are in the same order you passed items). Four modes: 'center' (one box centered on the canvas); 'row' (N boxes in a horizontally-centered row on desktop that STACK into a single mobile column — feature cards / stats / logo strip); 'grid' (N uniform cells in cols columns, block centered; stacks on mobile); 'stack' (a vertical list down the shared content column on both breakpoints). Honours the page-margin axis (content column 80..880 desktop / 20..400 mobile by default). Pure math — no env, no network. notes flags off-canvas / over-wide inputs.
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. |