diff --git a/ui/src/widgets/nodegraph.ts b/ui/src/widgets/nodegraph.ts
index 9964eb7343..f4099d9a29 100644
--- a/ui/src/widgets/nodegraph.ts
+++ b/ui/src/widgets/nodegraph.ts
@@ -2373,8 +2373,28 @@ export function NodeGraph(): m.Component<NodeGraphAttrs> {
             }
           },
           style: {
-            backgroundSize: `${20 * canvasState.zoom}px ${20 * canvasState.zoom}px`,
-            backgroundPosition: `${canvasState.panOffset.x}px ${canvasState.panOffset.y}px`,
+            backgroundSize: (() => {
+              const minPixelSpacing = 10;
+              let gridSize = 20;
+              while (gridSize * canvasState.zoom < minPixelSpacing) {
+                gridSize *= 2;
+              }
+              const size = gridSize * canvasState.zoom;
+              return `${size}px ${size}px`;
+            })(),
+            backgroundPosition: (() => {
+              const minPixelSpacing = 10;
+              let gridSize = 20;
+              while (gridSize * canvasState.zoom < minPixelSpacing) {
+                gridSize *= 2;
+              }
+              const size = gridSize * canvasState.zoom;
+              // Subtract size/2 so the dot (centered in its tile) lands exactly
+              // on the world origin — stays fixed when gridSize doubles.
+              const x = canvasState.panOffset.x - size / 2;
+              const y = canvasState.panOffset.y - size / 2;
+              return `${x}px ${y}px`;
+            })(),
             ...vnode.attrs.style,
           },
         },