diff --git a/docs/demos/auto-height-layout.vue b/docs/demos/auto-height-layout.vue
new file mode 100644
index 0000000..244d138
--- /dev/null
+++ b/docs/demos/auto-height-layout.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { nextTick, reactive, ref } from 'vue'
+
+import { AutoHeightItem, GridLayout } from '../../src'
+
+const layout = reactive([
+  { x: 0, y: 0, w: 2, h: 2, i: '0', static: false, content: 'Basic Content', isDraggable: false },
+  {
+    x: 2,
+    y: 0,
+    w: 2,
+    h: 4,
+    i: '1',
+    static: true,
+    content: 'Static Content<br>Cannot Move<br>or Resize'
+  },
+  { x: 4, y: 0, w: 2, h: 5, i: '2', static: false, content: 'Long Content<br>'.repeat(4) },
+  {
+    x: 6,
+    y: 0,
+    w: 2,
+    h: 3,
+    i: '3',
+    static: false,
+    content: 'Medium Length Content<br>Second Line'
+  },
+  { x: 8, y: 0, w: 2, h: 3, i: '4', static: false, content: 'Short Content' },
+  { x: 10, y: 0, w: 2, h: 3, i: '5', static: false, content: 'Short Content<br>With Line Break' },
+  { x: 0, y: 5, w: 2, h: 5, i: '6', static: false, content: 'Long Content<br>'.repeat(3) },
+  { x: 2, y: 5, w: 2, h: 5, i: '7', static: false, content: 'Content<br>'.repeat(2) },
+  { x: 4, y: 5, w: 2, h: 5, i: '8', static: false, content: 'Content Example' },
+  { x: 6, y: 3, w: 2, h: 4, i: '9', static: true, content: 'Static Item<br>Cannot Move' },
+  { x: 8, y: 4, w: 2, h: 4, i: '10', static: false, content: 'Normal Content' },
+  { x: 10, y: 4, w: 2, h: 4, i: '11', static: false, content: 'Can<br>Auto Adjust<br>Height' },
+  { x: 0, y: 10, w: 2, h: 5, i: '12', static: false, content: 'Content Example' },
+  {
+    x: 2,
+    y: 10,
+    w: 2,
+    h: 5,
+    i: '13',
+    static: false,
+    content: 'Content<br>Adjusts<br>Based on<br>Actual Height'
+  },
+  { x: 4, y: 8, w: 2, h: 4, i: '14', static: false, content: 'Content Example' },
+  { x: 6, y: 8, w: 2, h: 4, i: '15', static: false, content: 'Content Example<br>Multiple Lines' },
+  { x: 8, y: 10, w: 2, h: 5, i: '16', static: false, content: 'Content Example' },
+  { x: 10, y: 4, w: 2, h: 2, i: '17', static: false, content: 'Short Content' },
+  { x: 0, y: 9, w: 2, h: 3, i: '18', static: false, content: 'Auto Height Content' },
+  { x: 2, y: 6, w: 2, h: 2, i: '19', static: false, content: 'Test' }
+])
+const gridRef = ref<InstanceType<typeof GridLayout> | null>(null)
+
+// Add content to specified item
+function addContentToItem(id: string) {
+  const item = layout.find(item => item.i === id)
+  if (item) {
+    item.content += '<br>New Content Line'
+  }
+}
+
+// Remove content from specified item
+function reduceContentFromItem(id: string) {
+  const item = layout.find(item => item.i === id)
+  if (item) {
+    const lines = item.content.split('<br>')
+    if (lines.length > 1) {
+      lines.pop()
+      item.content = lines.join('<br>')
+    }
+  }
+}
+
+// Handle height update
+async function updateItemHeight(id: string, newHeight: number) {
+  const item = layout.find(item => item.i === id)
+  if (item && item.h !== newHeight) {
+    requestAnimationFrame(async () => {
+      // Update height
+      item.h = newHeight
+
+      // Wait for DOM update
+      await nextTick()
+
+      // Create new layout array to trigger recalculation
+      const newLayout = JSON.parse(JSON.stringify(layout))
+      layout.splice(0, layout.length, ...newLayout)
+      gridRef.value && gridRef.value.layoutUpdate()
+    })
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="controls">
+      <button @click="addContentToItem('2')">
+        Add Content to Item 2
+      </button>
+      <button @click="reduceContentFromItem('2')">
+        Remove Content from Item 2
+      </button>
+    </div>
+
+    <GridLayout
+      ref="gridRef"
+      v-model:layout="layout"
+      :row-height="30"
+      vertical-compact
+    >
+      <AutoHeightItem
+        v-for="item in layout"
+        :key="item.i"
+        v-bind="item"
+        :row-height="30"
+        @update:h="updateItemHeight(item.i, $event)"
+      >
+        <div class="content">
+          <div class="text">
+            {{ `${item.i}${item.static ? '- Static' : ''}` }}
+          </div>
+          <div class="dynamic-content" v-html="item.content"></div>
+        </div>
+      </AutoHeightItem>
+    </GridLayout>
+  </div>
+</template>
+
+<style scoped>
+.controls {
+  margin-bottom: 20px;
+}
+
+.controls button {
+  padding: 5px 10px;
+  margin-right: 10px;
+  color: white;
+  cursor: pointer;
+  background-color: #4caf50;
+  border: 0;
+  border-radius: 4px;
+}
+
+.controls button:hover {
+  background-color: #45a049;
+}
+
+.vgl-layout {
+  background-color: #eee;
+}
+
+:deep(.vgl-item:not(.vgl-item--placeholder)) {
+  background-color: #ccc;
+  border: 1px solid black;
+}
+
+:deep(.vgl-item--resizing) {
+  opacity: 90%;
+}
+
+:deep(.vgl-item--static) {
+  background-color: #cce;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.text {
+  padding: 5px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  border-bottom: 1px dashed #999;
+}
+
+.dynamic-content {
+  flex-grow: 1;
+  padding: 8px;
+  overflow: auto;
+}
+</style>
diff --git a/package.json b/package.json
index 4e8d3d7..2e31efb 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
   "dependencies": {
     "@vexip-ui/hooks": "^2.6.0",
     "@vexip-ui/utils": "^2.16.1",
+    "@vueuse/core": "^12.7.0",
     "interactjs": "^1.10.27"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e4f2b5f..60495b8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,6 +19,9 @@ importers:
       '@vexip-ui/utils':
         specifier: ^2.16.1
         version: 2.16.1
+      '@vueuse/core':
+        specifier: ^12.7.0
+        version: 12.7.0(typescript@5.4.4)
       interactjs:
         specifier: ^1.10.27
         version: 1.10.27
@@ -1270,36 +1273,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.0':
     resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.0':
     resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.0':
     resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.0':
     resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.0':
     resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.0':
     resolution: {integrity: sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==}
@@ -1374,46 +1383,55 @@ packages:
     resolution: {integrity: sha512-9OwUnK/xKw6DyRlgx8UizeqRFOfi9mf5TYCw1uolDaJSbUmBxP85DE6T4ouCMoN6pXw8ZoTeZCSEfSaYo+/s1w==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.27.4':
     resolution: {integrity: sha512-Vgdo4fpuphS9V24WOV+KwkCVJ72u7idTgQaBoLRD0UxBAWTF9GWurJO9YD9yh00BzbkhpeXtm6na+MvJU7Z73A==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.27.4':
     resolution: {integrity: sha512-pleyNgyd1kkBkw2kOqlBx+0atfIIkkExOTiifoODo6qKDSpnc6WzUY5RhHdmTdIJXBdSnh6JknnYTtmQyobrVg==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.27.4':
     resolution: {integrity: sha512-caluiUXvUuVyCHr5DxL8ohaaFFzPGmgmMvwmqAITMpV/Q+tPoaHZ/PWa3t8B2WyoRcIIuu1hkaW5KkeTDNSnMA==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.27.4':
     resolution: {integrity: sha512-FScrpHrO60hARyHh7s1zHE97u0KlT/RECzCKAdmI+LEoC1eDh/RDji9JgFqyO+wPDb86Oa/sXkily1+oi4FzJQ==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.27.4':
     resolution: {integrity: sha512-qyyprhyGb7+RBfMPeww9FlHwKkCXdKHeGgSqmIXw9VSUtvyFZ6WZRtnxgbuz76FK7LyoN8t/eINRbPUcvXB5fw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.27.4':
     resolution: {integrity: sha512-PFz+y2kb6tbh7m3A7nA9++eInGcDVZUACulf/KzDtovvdTizHpZaJty7Gp0lFwSQcrnebHOqxF1MaKZd7psVRg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.27.4':
     resolution: {integrity: sha512-Ni8mMtfo+o/G7DVtweXXV/Ol2TFf63KYjTtoZ5f078AUgJTmaIJnj4JFU7TK/9SVWTaSJGxPi5zMDgK4w+Ez7Q==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.27.4':
     resolution: {integrity: sha512-5AeeAF1PB9TUzD+3cROzFTnAJAcVUGLuR8ng0E0WXGkYhp6RD6L+6szYVX+64Rs0r72019KHZS1ka1q+zU/wUw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.27.4':
     resolution: {integrity: sha512-yOpVsA4K5qVwu2CaS3hHxluWIK5HQTjNV4tWjQXluMiiiu4pJj4BN98CvxohNCpcjMeTXk/ZMJBRbgRg8HBB6A==}
@@ -1738,12 +1756,21 @@ packages:
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
+  '@vueuse/core@12.7.0':
+    resolution: {integrity: sha512-jtK5B7YjZXmkGNHjviyGO4s3ZtEhbzSgrbX+s5o+Lr8i2nYqNyHuPVOeTdM1/hZ5Tkxg/KktAuAVDDiHMraMVA==}
+
   '@vueuse/metadata@10.11.1':
     resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
 
+  '@vueuse/metadata@12.7.0':
+    resolution: {integrity: sha512-4VvTH9mrjXqFN5LYa5YfqHVRI6j7R00Vy4995Rw7PQxyCL3z0Lli86iN4UemWqixxEvYfRjG+hF9wL8oLOn+3g==}
+
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
+  '@vueuse/shared@12.7.0':
+    resolution: {integrity: sha512-coLlUw2HHKsm7rPN6WqHJQr18WymN4wkA/3ThFaJ4v4gWGWAQQGK+MJxLuJTBs4mojQiazlVWAKNJNpUWGRkNw==}
+
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -6113,8 +6140,19 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/core@12.7.0(typescript@5.4.4)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 12.7.0
+      '@vueuse/shared': 12.7.0(typescript@5.4.4)
+      vue: 3.5.13(typescript@5.4.4)
+    transitivePeerDependencies:
+      - typescript
+
   '@vueuse/metadata@10.11.1': {}
 
+  '@vueuse/metadata@12.7.0': {}
+
   '@vueuse/shared@10.11.1(vue@3.5.13(typescript@5.4.4))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.13(typescript@5.4.4))
@@ -6122,6 +6160,12 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/shared@12.7.0(typescript@5.4.4)':
+    dependencies:
+      vue: 3.5.13(typescript@5.4.4)
+    transitivePeerDependencies:
+      - typescript
+
   JSONStream@1.3.5:
     dependencies:
       jsonparse: 1.3.1
diff --git a/src/components/auto-height-item.vue b/src/components/auto-height-item.vue
new file mode 100644
index 0000000..9a59a66
--- /dev/null
+++ b/src/components/auto-height-item.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import { useResizeObserver } from '@vueuse/core'
+import GridItem from './grid-item.vue'
+
+const props = defineProps({
+  isDraggable: {
+    type: Boolean,
+    default: null
+  },
+  isResizable: {
+    type: Boolean,
+    default: null
+  },
+  isBounded: {
+    type: Boolean,
+    default: null
+  },
+  static: {
+    type: Boolean,
+    default: false
+  },
+  minH: {
+    type: Number,
+    default: 1
+  },
+  minW: {
+    type: Number,
+    default: 1
+  },
+  maxH: {
+    type: Number,
+    default: Infinity
+  },
+  maxW: {
+    type: Number,
+    default: Infinity
+  },
+  x: {
+    type: Number,
+    required: true
+  },
+  y: {
+    type: Number,
+    required: true
+  },
+  w: {
+    type: Number,
+    required: true
+  },
+  h: {
+    type: Number,
+    required: true
+  },
+  i: {
+    type: [Number, String],
+    required: true
+  },
+  dragIgnoreFrom: {
+    type: String,
+    default: 'a, button'
+  },
+  dragAllowFrom: {
+    type: String,
+    default: null
+  },
+  resizeIgnoreFrom: {
+    type: String,
+    default: 'a, button'
+  },
+  preserveAspectRatio: {
+    type: Boolean,
+    default: false
+  },
+  dragOption: {
+    type: Object,
+    default: () => ({})
+  },
+  resizeOption: {
+    type: Object,
+    default: () => ({})
+  },
+  rowHeight: {
+    type: Number,
+    default: 30
+  },
+  margin: {
+    type: Array,
+    default: () => [10, 10]
+  }
+})
+
+const emit = defineEmits(['update:h'])
+
+const contentRef = ref<HTMLDivElement | null>(null)
+const contentHeight = ref(0)
+
+const calculatedRows = computed(() => {
+  if (contentHeight.value <= 0) return props.minH
+  const marginY = props.margin[1] as number
+  const rows = Math.ceil((contentHeight.value + marginY) / (props.rowHeight + marginY))
+  return Math.min(Math.max(rows, props.minH), props.maxH)
+})
+
+const observer = useResizeObserver(contentRef, entries => {
+  const entry = entries[0]
+  if (entry) {
+    contentHeight.value = entry.contentRect.height
+  }
+})
+watch(
+  () => calculatedRows.value,
+  newRows => {
+    if (newRows !== props.h) {
+      emit('update:h', newRows)
+    }
+  }
+)
+
+onMounted(() => {
+  if (contentRef.value) {
+    const height = contentRef.value.clientHeight
+    if (height > 0) {
+      contentHeight.value = height
+    }
+  }
+})
+onBeforeUnmount(() => {
+  observer && observer.stop()
+})
+</script>
+
+<template>
+  <GridItem v-bind="{ ...props }">
+    <div ref="contentRef">
+      <slot></slot>
+    </div>
+  </GridItem>
+</template>
diff --git a/src/components/grid-layout.vue b/src/components/grid-layout.vue
index f023401..c688571 100644
--- a/src/components/grid-layout.vue
+++ b/src/components/grid-layout.vue
@@ -316,7 +316,7 @@ provide(
 )
 provide(EMITTER_KEY, emitter)
 
-defineExpose({ state, getItem, resizeEvent, dragEvent })
+defineExpose({ state, getItem, resizeEvent, dragEvent, layoutUpdate })
 
 function increaseItem(item: any) {
   itemInstances.set(item.i, item)
diff --git a/src/index.ts b/src/index.ts
index bed93b0..90e4962 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,5 +2,6 @@ import './style.scss'
 
 export { default as GridLayout } from './components/grid-layout.vue'
 export { default as GridItem } from './components/grid-item.vue'
+export { default as AutoHeightItem } from './components/auto-height-item.vue'
 
 export * from './helpers/types'