diff --git a/src/components/Sing/SequencerGrid/Container.vue b/src/components/Sing/SequencerGrid/Container.vue
index cdb46c9b23..f7ba089cb9 100644
--- a/src/components/Sing/SequencerGrid/Container.vue
+++ b/src/components/Sing/SequencerGrid/Container.vue
@@ -6,6 +6,10 @@
     :sequencerZoomY
     :sequencerSnapType
     :numMeasures
+    :gridCellWidth
+    :gridCellHeight
+    :gridWidth
+    :gridHeight
     :offsetX="props.offsetX"
     :offsetY="props.offsetY"
   />
@@ -13,6 +17,8 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
+import { inject } from "vue";
+import { gridInfoInjectionKey } from "../ScoreSequencer.vue";
 import Presentation from "./Presentation.vue";
 import { useStore } from "@/store";
 
@@ -25,6 +31,16 @@ const props = defineProps<{
   offsetY: number;
 }>();
 
+const injectedValue = inject(gridInfoInjectionKey);
+if (injectedValue == undefined) {
+  throw new Error("injectedValue is undefined.");
+}
+
+const gridCellWidth = injectedValue.gridCellWidth;
+const gridCellHeight = injectedValue.gridCellHeight;
+const gridWidth = injectedValue.gridWidth;
+const gridHeight = injectedValue.gridHeight;
+
 const store = useStore();
 
 const tpqn = computed(() => store.state.tpqn);
diff --git a/src/components/Sing/SequencerGrid/Presentation.vue b/src/components/Sing/SequencerGrid/Presentation.vue
index d8484ff06e..10c7df474d 100644
--- a/src/components/Sing/SequencerGrid/Presentation.vue
+++ b/src/components/Sing/SequencerGrid/Presentation.vue
@@ -111,8 +111,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, toRef, inject } from "vue";
-import { gridInfoInjectionKey } from "../ScoreSequencer.vue";
+import { computed, toRef } from "vue";
 import { keyInfos, tickToBaseX } from "@/sing/viewHelper";
 import { TimeSignature } from "@/store/type";
 import { useSequencerGrid } from "@/composables/useSequencerGridPattern";
@@ -124,17 +123,14 @@ const props = defineProps<{
   sequencerZoomY: number;
   sequencerSnapType: number;
   numMeasures: number;
+  gridCellWidth: number;
+  gridCellHeight: number;
+  gridWidth: number;
+  gridHeight: number;
   offsetX: number;
   offsetY: number;
 }>();
 
-const injectedValue = inject(gridInfoInjectionKey);
-if (injectedValue == undefined) {
-  throw new Error("injectedValue is undefined.");
-}
-
-const { gridCellWidth, gridCellHeight, gridWidth, gridHeight } = injectedValue;
-
 const beatWidth = (timeSignature: TimeSignature) => {
   const beatType = timeSignature.beatType;
   const wholeNoteDuration = props.tpqn * 4;
diff --git a/src/components/Sing/SequencerGrid/index.stories.ts b/src/components/Sing/SequencerGrid/index.stories.ts
index 20722f072c..1e2c9d11d8 100644
--- a/src/components/Sing/SequencerGrid/index.stories.ts
+++ b/src/components/Sing/SequencerGrid/index.stories.ts
@@ -25,6 +25,10 @@ const meta: Meta<typeof Presentation> = {
     tpqn: 480,
     sequencerSnapType: 16,
     numMeasures: 32,
+    gridCellWidth: 7.5,
+    gridCellHeight: 22.5,
+    gridWidth: 3840,
+    gridHeight: 2880,
     offsetX: 0,
     offsetY: 0,
   },