Clyune Component GallerySubgrid · How it works & code
Subgrid lets nested grids 'borrow' parent grid lines, allowing panel content to align with adjacent cards.
Runtime logic
Visiting `/layout/subgrid`, DemoHost lazy-loads `demos/kits/kit-layout.js` (registry `mod: 'kit-layout'`) and calls `mount(host, { variant: 'subgrid' })`. mount resolves the variant to family `subgrid`; `withControls` builds the control panel (6 presets + sliders). `createCanvasStage` creates the `<canvas>` (HiDPI ≤ 2×, ResizeObserver) and the info panel. The family’s `build(S)` initialises state and returns the per-frame callback. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21
Dependencies
react 18.3.1
Imported APIs
withControls — Wraps the demo in the shared control panel (presets, sliders, reset); hot-updates or remounts on change; paramsFromSpec — Turns the spec (colour/speed/size/count/extras) into control-panel parameter definitions; createCanvasStage — Shared Canvas 2D stage: canvas + info panel, HiDPI, one rAF loop, pointer state, idle auto-pointer; hueOf — Hue of a colour (0–360°); clamp — Clamps a value to a range; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.clear — Clears with the background colour (translucent = trails); S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.setLineDash() — Sets the dash pattern for strokes; ctx.stroke() — Strokes the current path; ctx.fill() — Fills the current path; ctx.beginPath() — Starts a new path; ctx.moveTo() — Moves the pen without drawing; ctx.lineTo() — Adds a straight line to a point; ctx.fillRect() — Fills a rectangle; ctx.fillText() — Draws filled text; ctx.arcTo() — Adds an arc using tangent lines; ctx.closePath() — Closes the current sub-path; ctx.measureText() — Measures text width
Source code
frontend/src/demos/kits/kit-layout.js: FAM.subgrid (L587-L642), TITLES['subgrid'] (L649-L649)
Code walkthrough
L589-589: Control definitions (colour/speed/size/count/extras): Emphasis color, Outer gap, Panel columns, Inner column count, Cross-panel alignment, Tracks. L590-590: Preset buttons: name → parameter overrides (6). L591-599: Info-panel content: live rows(v), formula, notes, params, steps. L600-641: Init function: sets up state and returns the per-frame callback: draws with Canvas 2D `setLineDash`, `stroke`, `fill`, `beginPath`, `moveTo`, `lineTo` …; math via `Math.round`, `Math.sin`, `Math.min`; returns readouts `panels`, `inner`, `align`, `cell`, `gap`, `track`, `lines` … to the info panel. L649-649: This demo's entry in the `TITLES` table (title).
Principles
sub item Grid-template-columns: subgrid inherits parent track Multiple panel lines can thus be aligned around When there are no subgrids, panels calculate the columns independently, easily misdirected subgrid So that the embedded grid can "loan" a parent line and the internal fields of the card can match the next card. This is a comparison of two sets of cells: the internal and external columns are the same when the "cross panel align" is opened.