2b:null 2c:["$","title",null,{"children":"Responsive grid | Tom Larkworthy | Observable"}] 31:T68d,gridEditor = (gridView) => grid({ config: { rows: 9 }, elements: { configTitle: { panel: 0, w: 12, view: md`**config**` }, config: { p: 0, y: 1, w: 12, view: Inputs.bind( view`${[ "rows", Inputs.range([1, 24], { label: "rows", value: 6, step: 1 }) ]} ${[ "columns", Inputs.range([1, 24], { label: "columns", value: 12, step: 1 }) ]} ${[ "gridSize", Inputs.range([25, 45], { label: "gridSize (⚠️ global)", value: 32, step: 1 }) ]} ${[ "panels", Inputs.range([1, 12], { label: "panels", value: 32, step: 1 }) ]}`, gridView.config ) }, childTitle: { p: 1, w: 12, view: Inputs.bind( Inputs.select(Object.keys(gridView.elements), { label: "element" }), viewof selected ) }, child: { p: 1, y: 1, w: 12, view: Inputs.bind( view`${["p", Inputs.range([0, 10], { label: "p", step: 1 })]} ${["x", Inputs.range([0, 36], { label: "x" })]} ${["y", Inputs.range([0, 36], { label: "y" })]} ${["w", Inputs.range([1, 24], { label: "w", step: 1 })]} ${["h", Inputs.range([0, 24], { label: "h", step: 1 })]} ${["z", Inputs.range([-10, 10], { label: "z", step: 1 })]} ${["_view", Inputs.input(gridView.elements.plot.view)]}`, gridView.elements[selected] ) } } })32:T442,## Simple Uniform Coordinates... *yet responsive* The controls above are for building intuition over the coordinate system and grid parameters. Play with it! (you can instantiate it against your own grids too) Formally, there are *n* panels which rearrange to suit the screen resolutions. Typically three panels per row for **desktop** and 1 per row on **mobile**. On each panel is a **uniform** grid, typically 12 x 12, that keyed subviews can be placed. The constructor and the view's value emits objects of the form:- ``` grid({ config: { panels: columns: rows: elements: }, elements: { : { p: x: , y: , z: , w: , h: view: } } }) ``` 33:T740,exampleElements = ({ // prettier-ignore plot: { x: 1, y: 1, w: 10, h: 4, view: dynamicTimeseries([], { width: 10 * 32, height: 4 * 32 }) }, // prettier-ignore background0: { x: 0, y: 0, w: 12, h: 6, z: -1, view: svg` ${["p", panelVar]} ${["x", xVar]} ${["y", yVar]} ${["z", zVar]} ${["w", widthVar]} ${["h", heightVar]} ${["view", view]}`; ev.updateXY = updateXY; updateXY(); return ev; }; const gridVar = view`${[ "...", { columns: columnsVar, rows: rowsVar, gridSize: gridSizeVar, panels: panelsVar } ]}`; gridSizeVar.addEventListener("assign", (evt) => { const root = document.documentElement; root.style.setProperty("--gridSize", `${gridSizeVar.value}px`); updateGeometry(); }); columnsVar.addEventListener("assign", updateGeometry); rowsVar.addEventListener("assign", updateGeometry); panelsVar.addEventListener("assign", updateGeometry); const panelNS = `panel-${DOM.uid().id}`; const panel = viewLit`

${["config", gridVar]} ${[ "elements", view`${[ "...", Object.fromEntries( Object.entries(elements).map(([name, d]) => [name, childView(d)]) ), childView ]}` ]} `; updateGeometry(); return panel; }35:[] 2f:{"id":"bd9d083ddbe7ce90","slug":"grid","title":"Responsive grid","thumbnail":"64c43c3b27970e5eb239b73d0bd12227bfb67af5ff1dbd6e769706a860f49599","access_level":"public","create_time":"$D2021-10-03T13:20:17.715Z","update_time":"$D2024-03-23T19:12:15.634Z","view_time":null,"first_public_time":"$D2021-10-24T14:24:47.109Z","fork":false,"stars":19,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":1595,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":7,"collection":{"id":"d00b7aa83811f066","slug":"ui","title":"ui","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"Responsive grid","cells":[{"id":0,"value":"# Responsive *grid*\n\nPlace views on responsive grid panels to create mobile friendly composite views *quickly*.\n\n~~~js\n import {grid} from '@tomlarkworthy/grid'\n~~~\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"viewof gridPanelExample = grid({\n elements: exampleElements // See below, [{name: {p,x,y,z,w,h,view:...}}, ...]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"gridEditor(viewof gridPanelExample)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"## Mutable and reactive throughout\nYou don't need to decide upfront what the grid layout it and what components are in it. It can be mutated reactively using [\"views are mutable values\"](https://observablehq.com/@mbostock/views-are-mutable-values) idioms. In our example below we use *Inputs.bind* to [synchronize](https://observablehq.com/@mbostock/synchronized-views) the controls to the grid above, without invoking Dataflow.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1423,"value":"### CSS var(--gridSize)\n\nTypically the grid will calculate the ideal *gridSize* which will be near 32 pixels. It is available on the config object of the grid, but additionally through the global CSS param `--gridSize` which can be sometimes be simpler or performant\n\n⚠️ --gridSize is global and shared across *all* grids in a notebook.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"## Responsive\n\nYou can make your UI responsive by setting the *p* from *panel* attribute of your elements. \n\nThe panels are arranged to suit the display width, 3 columns on desktop, less on narrower devices. \n\nAll panels share the same height, as defined by the `` attribute of the *config*.\n\nEach panel has its own origin for the x,y coordinates starting at 0,0 and meant for use upto (``, ``). \n\n**Responsiveness is opt-in, if you want to make a non-responsive UIs, don't set the *panel*\nand use all the coordinates upto 36 on Desktop.**\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"viewof responsiveExample = grid({\n elements: {\n p0: {\n p: 0,\n w: 12,\n h: 6,\n view: svg`