diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e800988a85148f197d0b03e8516c60a0d7682760..16b55c3560101b2f75a5bfd9b5f7947fd807b3d7 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -14,6 +14,7 @@ module.exports = {
                     '/examples/Colors.md',
                     '/examples/Disabled.md',
                     '/examples/DisabledItems.md',
+                    '/examples/Responsive.md',
                 ]
             }
         ],
diff --git a/docs/examples/Responsive.md b/docs/examples/Responsive.md
new file mode 100644
index 0000000000000000000000000000000000000000..3d87a0affb7b9b0c049a20a0286753dcdc21dce2
--- /dev/null
+++ b/docs/examples/Responsive.md
@@ -0,0 +1,12 @@
+# Example 8: Responsive
+
+The grid is responsive. Try resizing it below:
+
+<ClientOnly>
+<script setup>
+import Example8Responsive from "../../example/src/Example8Responsive.vue";
+</script>
+
+
+<Example8Responsive />
+</ClientOnly>
\ No newline at end of file
diff --git a/example/src/App.vue b/example/src/App.vue
index a1c4b3e269eea1849864a73e76e97e74aabcd96f..e0f7b1e0c2755c2ce6b4f6a12cb920c260ddc8d2 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -6,6 +6,7 @@ import Example4Lessons from "./Example4Lessons.vue";
 import Example5Colors from "./Example5Colors.vue";
 import Example6Disabled from "./Example6Disabled.vue";
 import Example7DisabledItems from "./Example7DisabledItems.vue";
+import Example8Responsive from "./Example8Responsive.vue";
 </script>
 
 <template>
@@ -73,7 +74,7 @@ import Example7DisabledItems from "./Example7DisabledItems.vue";
 
         <example6-disabled></example6-disabled>
       </div>
-      <div>
+      <div style="height: 100%">
         <h2>Example 7: Disabled fields and items with props</h2>
         <p>
           This is a grid with disabled fields and items. Red items are disabled
@@ -83,6 +84,10 @@ import Example7DisabledItems from "./Example7DisabledItems.vue";
         <example7-disabled-items></example7-disabled-items>
       </div>
     </div>
+
+    <h2>Example 8:</h2>
+    <p>The grid is responsive. Try resizing it below:</p>
+    <example8-responsive></example8-responsive>
   </div>
 </template>
 
diff --git a/example/src/Example8Responsive.vue b/example/src/Example8Responsive.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ebf541902d2c839fcf5433428fbee596d618f6ca
--- /dev/null
+++ b/example/src/Example8Responsive.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="parent">
+    <drag-grid v-model="items" :cols="4" :rows="4" class="grid">
+      <template #item="{ key }">
+        <div class="banana">
+          {{ key }}
+        </div>
+      </template>
+    </drag-grid>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Example8Responsive",
+  data() {
+    return {
+      items: [
+        { x: 1, y: 1, w: 1, h: 3, key: "item 1" },
+        { x: 4, y: 3, w: 1, h: 1, key: "item 2" },
+        { x: 2, y: 4, w: 2, h: 1, key: "item 3" },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.parent {
+  min-height: 600px;
+}
+
+.grid {
+  resize: both;
+  overflow: auto;
+  aspect-ratio: 1;
+  border: #edd85f 2px solid;
+  width: 400px;
+}
+
+.banana {
+  background: #edd85f;
+  width: 100%;
+  height: 100%;
+}
+</style>