diff --git a/public/app/features/explore-map/components/ExploreMapCanvas.tsx b/public/app/features/explore-map/components/ExploreMapCanvas.tsx
index 22923459101..4b5587bf4de 100644
--- a/public/app/features/explore-map/components/ExploreMapCanvas.tsx
+++ b/public/app/features/explore-map/components/ExploreMapCanvas.tsx
@@ -45,6 +45,48 @@ export function ExploreMapCanvas() {
           panY: ref.state.positionY,
         })
       );
+
+      // Update grid scale dynamically to maintain visibility at different zoom levels
+      if (canvasRef.current) {
+        const scale = ref.state.scale;
+        // Adjust grid size and line width based on zoom level to maintain visibility
+        // Formula: we want the rendered line to be at least 1px on screen
+        // So if scale = 0.17, and we want 1px visible, we need lineWidth / scale >= 1
+        // Therefore lineWidth >= 1 / scale
+        let gridSize = 20;
+        let lineWidth = 1;
+
+        if (scale < 0.8) {
+          gridSize = 40;
+          lineWidth = 2;
+        }
+        if (scale < 0.5) {
+          gridSize = 80;
+          lineWidth = 3;
+        }
+        if (scale < 0.3) {
+          gridSize = 160;
+          lineWidth = 4;
+        }
+        if (scale < 0.2) {
+          gridSize = 200;
+          lineWidth = 6;
+        }
+        if (scale < 0.15) {
+          gridSize = 320;
+          lineWidth = 8;
+        }
+        if (scale < 0.1) {
+          gridSize = 640;
+          lineWidth = 12;
+        }
+
+        canvasRef.current.style.backgroundSize = `${gridSize}px ${gridSize}px`;
+        canvasRef.current.style.backgroundImage = `
+          linear-gradient(var(--grid-color) ${lineWidth}px, transparent ${lineWidth}px),
+          linear-gradient(90deg, var(--grid-color) ${lineWidth}px, transparent ${lineWidth}px)
+        `;
+      }
     },
     [dispatch]
   );
@@ -118,9 +160,10 @@ const getStyles = (theme: GrafanaTheme2) => {
       position: 'relative',
       width: '10000px',
       height: '10000px',
+      '--grid-color': theme.colors.border.weak,
       backgroundImage: `
-        linear-gradient(${theme.colors.border.weak} 1px, transparent 1px),
-        linear-gradient(90deg, ${theme.colors.border.weak} 1px, transparent 1px)
+        linear-gradient(var(--grid-color) 1px, transparent 1px),
+        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px)
       `,
       backgroundSize: '20px 20px',
       backgroundPosition: '-1px -1px',