diff --git a/.husky/commit-msg b/.husky/commit-msg
old mode 100755
new mode 100644
diff --git a/.husky/pre-commit b/.husky/pre-commit
old mode 100755
new mode 100644
diff --git a/packages/cdk/platform/src/platform.ts b/packages/cdk/platform/src/platform.ts
old mode 100755
new mode 100644
diff --git a/packages/cdk/scroll/__tests__/__snapshots__/virtualScroll.spec.ts.snap b/packages/cdk/scroll/__tests__/__snapshots__/virtualScroll.spec.ts.snap
index 8457cc1f8..625c358d1 100644
--- a/packages/cdk/scroll/__tests__/__snapshots__/virtualScroll.spec.ts.snap
+++ b/packages/cdk/scroll/__tests__/__snapshots__/virtualScroll.spec.ts.snap
@@ -1,21 +1,21 @@
 // Vitest Snapshot v1
 
-exports[`VirtualScroll > basic work > itemRender work 1`] = `
+exports[`VirtualScroll > basic work > render work 1`] = `
 "<div class=\\"cdk-virtual-scroll\\">
-  <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px;\\">
-    <div class=\\"cdk-virtual-scroll-filler\\" style=\\"height: 400px;\\">
-      <div class=\\"cdk-virtual-scroll-content\\" style=\\"transform: translateY(0px); position: absolute; left: 0px; right: 0px; top: 0px;\\"><span class=\\"virtual-item\\">key-0 - 0</span><span class=\\"virtual-item\\">key-1 - 1</span><span class=\\"virtual-item\\">key-2 - 2</span><span class=\\"virtual-item\\">key-3 - 3</span><span class=\\"virtual-item\\">key-4 - 4</span><span class=\\"virtual-item\\">key-5 - 5</span><span class=\\"virtual-item\\">key-6 - 6</span><span class=\\"virtual-item\\">key-7 - 7</span><span class=\\"virtual-item\\">key-8 - 8</span><span class=\\"virtual-item\\">key-9 - 9</span><span class=\\"virtual-item\\">key-10 - 10</span><span class=\\"virtual-item\\">key-11 - 11</span></div>
-    </div>
+  <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px; width: 100%;\\">
+    <!---->
+    <div class=\\"cdk-virtual-scroll-filler-vertical\\" style=\\"height: 400px; width: 0px;\\"></div>
+    <div class=\\"cdk-virtual-scroll-content\\" style=\\"margin-top: 0px; margin-left: 0px;\\"><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-0 - 0</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-1 - 1</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-2 - 2</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-3 - 3</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-4 - 4</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-5 - 5</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-6 - 6</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-7 - 7</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-8 - 8</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-9 - 9</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-10 - 10</span></div>
   </div>
 </div>"
 `;
 
-exports[`VirtualScroll > basic work > render work 1`] = `
+exports[`VirtualScroll > basic work > rowRender work 1`] = `
 "<div class=\\"cdk-virtual-scroll\\">
-  <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px;\\">
-    <div class=\\"cdk-virtual-scroll-filler\\" style=\\"height: 400px;\\">
-      <div class=\\"cdk-virtual-scroll-content\\" style=\\"transform: translateY(0px); position: absolute; left: 0px; right: 0px; top: 0px;\\"><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-0 - 0</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-1 - 1</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-2 - 2</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-3 - 3</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-4 - 4</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-5 - 5</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-6 - 6</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-7 - 7</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-8 - 8</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-9 - 9</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-10 - 10</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-11 - 11</span></div>
-    </div>
+  <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px; width: 100%;\\">
+    <!---->
+    <div class=\\"cdk-virtual-scroll-filler-vertical\\" style=\\"height: 400px; width: 0px;\\"></div>
+    <div class=\\"cdk-virtual-scroll-content\\" style=\\"margin-top: 0px; margin-left: 0px;\\"><span class=\\"virtual-item\\">key-0 - 0</span><span class=\\"virtual-item\\">key-1 - 1</span><span class=\\"virtual-item\\">key-2 - 2</span><span class=\\"virtual-item\\">key-3 - 3</span><span class=\\"virtual-item\\">key-4 - 4</span><span class=\\"virtual-item\\">key-5 - 5</span><span class=\\"virtual-item\\">key-6 - 6</span><span class=\\"virtual-item\\">key-7 - 7</span><span class=\\"virtual-item\\">key-8 - 8</span><span class=\\"virtual-item\\">key-9 - 9</span><span class=\\"virtual-item\\">key-10 - 10</span></div>
   </div>
 </div>"
 `;
diff --git a/packages/cdk/scroll/__tests__/virtualScroll.spec.ts b/packages/cdk/scroll/__tests__/virtualScroll.spec.ts
index 9434158dc..81d3570dc 100644
--- a/packages/cdk/scroll/__tests__/virtualScroll.spec.ts
+++ b/packages/cdk/scroll/__tests__/virtualScroll.spec.ts
@@ -2,7 +2,7 @@ import { MountingOptions, VueWrapper, flushPromises, mount } from '@vue/test-uti
 import { h } from 'vue'
 
 import VirtualScroll from '../src/virtual/VirtualScroll'
-import { VirtualItemRenderFn, VirtualScrollInstance, VirtualScrollProps } from '../src/virtual/types'
+import { VirtualRowRenderFn, VirtualScrollInstance, VirtualScrollProps } from '../src/virtual/types'
 
 const getData = (length: number, key = 'key') => {
   const data: { key: string }[] = []
@@ -14,12 +14,12 @@ const getData = (length: number, key = 'key') => {
 
 const defaultProps = {
   height: 200,
-  itemHeight: 20,
+  rowHeight: 20,
   getKey: 'key',
 } as const
 
 const defaultItemSlot = `
-<template #item="{ item, index }">
+<template #row="{ item, index }">
   <span class="virtual-item" style="height: 20px;">{{ item.key }} - {{ index }}</span>
 </template>
 `
@@ -86,7 +86,7 @@ describe('VirtualScroll', () => {
 
       await wrapper.setProps({ dataSource: getData(15) })
 
-      expect(wrapper.findAll('.virtual-item').length).toEqual(12)
+      expect(wrapper.findAll('.virtual-item').length).toEqual(11)
     })
 
     test('fullHeight work', async () => {
@@ -118,12 +118,12 @@ describe('VirtualScroll', () => {
       await wrapper.setProps({ dataSource: getData(20) })
 
       expect(wrapper.find('.cdk-virtual-scroll-holder').attributes('style')).toContain('height: 200px')
-      expect(wrapper.findAll('.virtual-item').length).toEqual(12)
+      expect(wrapper.findAll('.virtual-item').length).toEqual(11)
 
       await wrapper.setProps({ height: 300 })
 
       expect(wrapper.find('.cdk-virtual-scroll-holder').attributes('style')).toContain('height: 300px')
-      expect(wrapper.findAll('.virtual-item').length).toEqual(17)
+      expect(wrapper.findAll('.virtual-item').length).toEqual(16)
     })
 
     test('itemHeight work', async () => {
@@ -136,11 +136,11 @@ describe('VirtualScroll', () => {
 
       await wrapper.setProps({ dataSource: getData(30) })
 
-      expect(wrapper.findAll('.virtual-item').length).toEqual(12)
+      expect(wrapper.findAll('.virtual-item').length).toEqual(11)
 
-      await wrapper.setProps({ itemHeight: 10 })
+      await wrapper.setProps({ rowHeight: 10 })
 
-      expect(wrapper.findAll('.virtual-item').length).toEqual(22)
+      expect(wrapper.findAll('.virtual-item').length).toEqual(21)
     })
 
     test('getKey work', async () => {
@@ -156,13 +156,13 @@ describe('VirtualScroll', () => {
       wrapper.findAll('.virtual-item').forEach((item, index) => expect(item.text()).toEqual(`key-${index} - ${index}`))
     })
 
-    test('itemRender work', async () => {
-      const itemRender: VirtualItemRenderFn = ({ item, index }) => {
+    test('rowRender work', async () => {
+      const rowRender: VirtualRowRenderFn = ({ item, index }) => {
         const { key } = item as { key: string }
         return h('span', { class: 'virtual-item' }, [`${key} - ${index}`])
       }
       const wrapper = VirtualScrollMount({
-        props: { dataSource: getData(20), itemRender },
+        props: { dataSource: getData(20), rowRender },
       })
 
       expect(wrapper.html()).toMatchSnapshot()
diff --git a/packages/cdk/scroll/demo/Basic.vue b/packages/cdk/scroll/demo/Basic.vue
index 5877b3e39..ebbdee78d 100644
--- a/packages/cdk/scroll/demo/Basic.vue
+++ b/packages/cdk/scroll/demo/Basic.vue
@@ -4,13 +4,15 @@
       ref="listRef"
       :dataSource="data"
       :height="200"
-      :itemHeight="20"
+      :rowHeight="20"
+      :bufferSize="20"
+      :bufferOffset="5"
       getKey="key"
       @scroll="onScroll"
       @scrolledChange="onScrolledChange"
       @scrolledBottom="onScrolledBottom"
     >
-      <template #item="{ item, index }">
+      <template #row="{ item, index }">
         <span class="virtual-item" @click="onItemClick(item.key)">{{ item.key }} - {{ index }}</span>
       </template>
     </CdkVirtualScroll>
diff --git a/packages/cdk/scroll/demo/Both.md b/packages/cdk/scroll/demo/Both.md
new file mode 100644
index 000000000..5936d45a2
--- /dev/null
+++ b/packages/cdk/scroll/demo/Both.md
@@ -0,0 +1,14 @@
+---
+title:
+  zh: 横向&竖向虚拟滚动
+  en: Horizontal & vertical virtual scroll
+order: 3
+---
+
+## zh
+
+开启横向以及竖向虚拟滚动的场景。
+
+## en
+
+Use horizontal and vertical virtual scroll.
diff --git a/packages/cdk/scroll/demo/Both.vue b/packages/cdk/scroll/demo/Both.vue
new file mode 100644
index 000000000..6401be15d
--- /dev/null
+++ b/packages/cdk/scroll/demo/Both.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="demo-both-scroll-wrapper">
+    <CdkVirtualScroll
+      ref="listRef"
+      :dataSource="rowData"
+      :height="200"
+      :rowHeight="20"
+      :colWidth="200"
+      :virtual="true"
+      :rowRender="rowRender"
+      getKey="key"
+    >
+      <template #col="{ row, item, index }">
+        <span class="virtual-item" @click="onItemClick(item.key)">{{ row.key }} - {{ index }}</span>
+      </template>
+    </CdkVirtualScroll>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, ref } from 'vue'
+
+import { VirtualRowRenderFn, VirtualScrollInstance, VirtualScrollRowData } from '@idux/cdk/scroll'
+
+const listRef = ref<VirtualScrollInstance>()
+const colData: { key: string }[] = []
+for (let index = 0; index < 1000; index++) {
+  colData.push({ key: `col-key-${index}` })
+}
+const rowData: VirtualScrollRowData[] = []
+for (let index = 0; index < 1000; index++) {
+  rowData.push({
+    key: `row-key-${index}`,
+    data: colData,
+  })
+}
+
+const rowRender: VirtualRowRenderFn = ({ children }) =>
+  h(
+    'div',
+    {
+      class: 'virtual-row',
+    },
+    children,
+  )
+
+const onItemClick = (key: string) => {
+  console.log('click:', key)
+}
+</script>
+
+<style lang="less">
+.demo-both-scroll-wrapper {
+  height: 240px;
+  .cdk-virtual-scroll {
+    border: 1px solid red;
+    margin-bottom: 8px;
+  }
+
+  .virtual-row {
+    flex-shrink: 0;
+    display: flex;
+    height: 20px;
+    flex-wrap: nowrap;
+    border: 1px solid gray;
+  }
+
+  .virtual-item {
+    flex-shrink: 0;
+    padding-left: 16px;
+    border: 1px solid gray;
+    height: 100%;
+    width: 200px;
+    line-height: 18px;
+  }
+}
+</style>
diff --git a/packages/cdk/scroll/demo/Horizontal.md b/packages/cdk/scroll/demo/Horizontal.md
new file mode 100644
index 000000000..41d361cf4
--- /dev/null
+++ b/packages/cdk/scroll/demo/Horizontal.md
@@ -0,0 +1,14 @@
+---
+title:
+  zh: 横向虚拟滚动
+  en: Horizontal virtual scroll
+order: 2
+---
+
+## zh
+
+仅开启横向虚拟滚动的场景。
+
+## en
+
+Only use horizontal virtual scroll.
diff --git a/packages/cdk/scroll/demo/Horizontal.vue b/packages/cdk/scroll/demo/Horizontal.vue
new file mode 100644
index 000000000..8ebeab3b8
--- /dev/null
+++ b/packages/cdk/scroll/demo/Horizontal.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="demo-horizontal-scroll-wrapper">
+    <CdkVirtualScroll
+      ref="listRef"
+      :dataSource="rowData"
+      :height="200"
+      :fullHeight="true"
+      :colWidth="80"
+      :bufferSize="20"
+      :bufferOffset="5"
+      :virtual="{ vertical: false, horizontal: true }"
+      :rowRender="rowRender"
+      getKey="key"
+      @scroll="onScroll"
+      @scrolledChange="onScrolledChange"
+      @scrolledBottom="onScrolledBottom"
+    >
+      <template #col="{ item, index }">
+        <span class="virtual-item" @click="onItemClick(item.key)">{{ item.key }} - {{ index }}</span>
+      </template>
+    </CdkVirtualScroll>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, ref } from 'vue'
+
+import { VirtualRowRenderFn, VirtualScrollInstance } from '@idux/cdk/scroll'
+
+const listRef = ref<VirtualScrollInstance>()
+const data: { key: string }[] = []
+for (let index = 0; index < 1000; index++) {
+  data.push({ key: `key-${index}` })
+}
+const rowData = [
+  {
+    key: 'row',
+    data,
+  },
+]
+
+const rowRender: VirtualRowRenderFn = ({ children }) =>
+  h(
+    'div',
+    {
+      class: 'virtual-row',
+      style: { display: 'flex', height: '100%', 'flex-wrap': 'nowrap' },
+    },
+    children,
+  )
+
+const onScroll = (evt: Event) => {
+  console.log('scroll:', evt)
+}
+
+const onScrolledChange = (startIndex: number, endIndex: number, visibleData: { key: string }[]) =>
+  console.log('onScrolledChange', startIndex, endIndex, visibleData)
+
+const onScrolledBottom = () => console.log('onScrolledBottom')
+
+const onItemClick = (key: string) => {
+  console.log('click:', key)
+}
+</script>
+
+<style lang="less">
+.demo-horizontal-scroll-wrapper {
+  height: 240px;
+  .cdk-virtual-scroll {
+    border: 1px solid red;
+    margin-bottom: 8px;
+  }
+
+  .cdk-virtual-scroll-content {
+    height: 100%;
+  }
+
+  .virtual-row {
+    display: flex;
+    height: 100%;
+    flex-wrap: nowrap;
+  }
+
+  .virtual-item {
+    flex-shrink: 0;
+    padding-left: 16px;
+    border: 1px solid gray;
+    height: 100%;
+    width: 80px;
+    line-height: 18px;
+  }
+}
+</style>
diff --git a/packages/cdk/scroll/demo/Switch.vue b/packages/cdk/scroll/demo/Switch.vue
index 840f89bc6..9e2bb9cb8 100644
--- a/packages/cdk/scroll/demo/Switch.vue
+++ b/packages/cdk/scroll/demo/Switch.vue
@@ -1,5 +1,5 @@
 <template>
-  <CdkVirtualScroll :dataSource="data" :height="height" getKey="key" :itemHeight="20" :itemRender="itemRender">
+  <CdkVirtualScroll :dataSource="data" :height="height" getKey="key" :rowHeight="20" :rowRender="itemRender">
   </CdkVirtualScroll>
 
   <IxSpace>
@@ -33,7 +33,7 @@
 <script setup lang="ts">
 import { computed, h, ref } from 'vue'
 
-import { VirtualItemRenderFn } from '@idux/cdk/scroll'
+import { VirtualRowRenderFn } from '@idux/cdk/scroll'
 
 const getData = (length: number, key = 'key') => {
   const data: { key: string }[] = []
@@ -47,7 +47,7 @@ const dataLength = ref(20)
 const data = computed(() => getData(dataLength.value))
 const height = ref(200)
 const switchItemRender = ref(false)
-const itemRender = computed<VirtualItemRenderFn>(() => {
+const itemRender = computed<VirtualRowRenderFn>(() => {
   if (switchItemRender.value) {
     return ({ item }) => h('div', { style: { height: '20px', paddingLeft: '8px' } }, [`${item.key}`])
   } else {
diff --git a/packages/cdk/scroll/docs/Api.zh.md b/packages/cdk/scroll/docs/Api.zh.md
index d46180596..0b01d5078 100644
--- a/packages/cdk/scroll/docs/Api.zh.md
+++ b/packages/cdk/scroll/docs/Api.zh.md
@@ -12,18 +12,66 @@
 | --- | --- | --- | --- | --- | --- |
 | `contentRender` | 自定义列表的容器节点 | `VirtualContentRenderFn \| #content={children}` | - | - | - |
 | `dataSource` | 需要渲染的数据列表 | `Array` | `[]` | - | - |
-| `fullHeight` | 是否永远使用 `height` 作为容器高度 | `boolean` | `false` | - | 仅在不符合虚拟滚动条件时生效 |
 | `getKey` | 列表项的唯一标识 | `string \| (item) => VKey` | `key` | - | - |
-| `height` | 列表的高度 | `number` | `0` | - | 设置为大于 0 时才可以启用虚拟滚动 |
-| `itemHeight` | 列表项的高度 | `number` | `0` | - | 设置为大于 0 时才可以启用虚拟滚动 |
-| `itemRender` | 列表项的渲染函数 | `VirtualItemRenderFn \| #item={item, index}` | - | - | 必须设置或者提供 `item` 插槽 |
-| `virtual` | 是否启用虚拟滚动 | `boolean` | `true` | - | - |
+| `height` | 列表的高度 | `number \| 'auto' \| '100%'` | `0` | - | 设置为大于 0 时才可以启用虚拟滚动 |
+| `fullHeight` | 是否永远使用 `height` 作为容器高度 | `boolean` | `false` | - | 仅在不符合虚拟滚动条件时生效 |
+| `width` | 列表的宽度 | `number \| 100%` | `0` | - | 设置为大于 0 时才可以启用虚拟滚动 |
+| `fullHeight` | 是否永远使用 `width` 作为容器的宽度 | `boolean` | `false` | - | 仅在不符合虚拟滚动条件时生效 |
+| `rowHeight` | 列表行的高度 | `number` | `0` | - | 设置为大于 0 时才可以启用虚拟滚动 |
+| `colWidth` | 列表列的宽度 | `number` | `0` | - | 设置为大于 0 时才可以启用虚拟滚动 |
+| `rowRender` | 列表行的渲染函数 | `VirtualRowRenderFn \| #row={item, index}` | - | - | 必须设置或者提供 `row` 插槽 |
+| `colRender` | 列表列的渲染函数 | `VirtualColRenderFn \| #col={row, item, index}` | - | - | 必须设置或者提供 `col` 插槽 |
+| `virtual` | 是否启用虚拟滚动 | `boolean \| VirtualScrollEnabled` | `{ horizontal: true, vertical: false }` | - | - |
+| `buffer` | 缓冲区大小 | `numnber` | `0` | - | - |
+| `bufferOffset` | 在距离数据边界有几项时开始渲染下一屏数据 | `numnber` | `0` | - | - |
+| `isStrictGrid` | 是否是严格的栅格 | `boolean` | `true` | - | 严格的栅格指行列之前是对齐的，即上一行的某列和下一行的这一列一定是对齐的 |
 | `onScroll` | 滚动事件 | `(evt: Event) => void` | - | - | - |
 | `onScrolledChange` | 滚动的位置发生变化 | `(startIndex: number, endIndex: number, visibleData: any[]) => void` | - | - | - |
 | `onScrolledBottom` | 滚动到底部时触发 | `() => void` | - | - | - |
 
+```ts
+type VirtualRowRenderFn<Row = any> = (option: { item: Row; index: number; children?: VNode[] }) => VNodeChild
+
+type VirtualColRenderFn<Row = any, Col = any> = (option: { row: Row; item: Col; index: number }) => VNodeChild
+
+type VirtualContentRenderFn = (children: VNode[]) => VNodeChild
+
+type VirtualScrollEnabled = { horizontal: boolean; vertical: boolean }
+```
+
 #### VirtualScrollMethods
 
 | 名称 | 说明 | 参数类型 | 备注 |
 | --- | --- | --- | --- |
 | `scrollTo` | 手动设置滚动条位置 | `(value?: number \| VirtualScrollToOptions) => void` | 支持滚动到具体的 key 或者 index, 以及设置偏移量 |
+
+#### 如何开启横向虚拟滚动
+
+##### 设置virtual
+
+设置 `virtual` 为 `true` 或者 `{ horizontal: true }`
+
+##### 调整数据结构
+
+由于所有的行和列必须都有key来优化渲染，因此数据不可以只是一个二维数组，需要是以下的数据结构组成的数组：
+
+```ts
+interface RowData {
+  [key: string]: any
+  data: unknown[]
+}
+```
+
+其中 `RowData` 是行数据，其中的 `data` 是列数据
+
+##### 根据实际情况设置 `isStrictGrid`
+
+我们允许每一行的列都是独立的宽度，即每一行的列数和列宽是不一样的，但这样会极大增加计算复杂度。
+
+因此，在每行的列都对齐，即每行的列都一样宽的情况下，只需要计算一行即可，在 `isStrictGrid` 为 `true` 时，会采取这种计算策略。
+
+##### 根据渲染复杂度确定是否开启 `buffer` 和 `bufferOffset`
+
+在开启了 `buffer` 后，会在当前窗口可渲染的行列基础上，再多渲染一些数据来缓解渲染频率过高的问题，但这在数据的渲染过于复杂的情况下并不适用，因为单次渲染的节点会增加，从而会导致渲染卡顿。
+
+`bufferOffset` 的意义，是在滚动到距离所有渲染的项目边界还有几项时就提前渲染下一屏的数据，它可以一定程度上让滚动更加顺滑，但是也增加了渲染频率。
diff --git a/packages/cdk/scroll/index.ts b/packages/cdk/scroll/index.ts
index 948875c5f..e1c2d2d14 100644
--- a/packages/cdk/scroll/index.ts
+++ b/packages/cdk/scroll/index.ts
@@ -21,7 +21,10 @@ export type {
   VirtualScrollComponent,
   VirtualScrollPublicProps as VirtualScrollProps,
   VirtualContentRenderFn,
-  VirtualItemRenderFn,
+  VirtualRowRenderFn,
+  VirtualColRenderFn,
   VirtualScrollToOptions,
   VirtualScrollToFn,
+  VirtualScrollEnabled,
+  VirtualScrollRowData,
 } from './src/virtual/types'
diff --git a/packages/cdk/scroll/src/virtual/VirtualScroll.tsx b/packages/cdk/scroll/src/virtual/VirtualScroll.tsx
index 1977dae33..d8b9e73da 100644
--- a/packages/cdk/scroll/src/virtual/VirtualScroll.tsx
+++ b/packages/cdk/scroll/src/virtual/VirtualScroll.tsx
@@ -5,92 +5,191 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type ComponentPublicInstance, computed, defineComponent, provide, ref, watch } from 'vue'
+import { type ComponentPublicInstance, computed, defineComponent, onMounted, onUpdated, provide, ref, watch } from 'vue'
 
-import { callEmit, useState } from '@idux/cdk/utils'
+import { Logger, callEmit, useState } from '@idux/cdk/utils'
 
-import { useContainerHeight } from './composables/useContainerHeight'
+import { useContainerSize } from './composables/useContainerSize'
 import { useGetKey } from './composables/useGetKey'
-import { useHeights } from './composables/useHeights'
-import { useScrollPlacement } from './composables/useScrollPlacement'
+import { useRenderPool } from './composables/useRenderPool'
+import { type Scroll, useScrollPlacement } from './composables/useScrollPlacement'
 import { useScrollState } from './composables/useScrollState'
 import { useScrollTo } from './composables/useScrollTo'
+import { useSizeCollect } from './composables/useSizeCollect'
+import Col from './contents/Col'
 import Holder from './contents/Holder'
-import Item from './contents/Item'
+import Row from './contents/Row'
 import { virtualScrollToken } from './token'
-import { virtualListProps } from './types'
+import { type VirtualScrollEnabled, virtualListProps } from './types'
+import { isRowData } from './utils'
 
 export default defineComponent({
   name: 'CdkVirtualScroll',
   props: virtualListProps,
   setup(props, { expose, slots }) {
+    if (__DEV__) {
+      if (props.itemHeight) {
+        Logger.warn('cdk/scroll', 'itemHeight is deprecated, use rowHeight instead')
+      }
+      if (props.itemRender) {
+        Logger.warn('cdk/scroll', 'itemRender is deprecated, use rowRender instead')
+      }
+    }
+
     const useVirtual = computed(() => props.virtual && props.itemHeight > 0)
     const getKey = useGetKey(props)
-    const { heights, collectHeights, heightsUpdateMark, setItem } = useHeights()
+    const { collectSize, sizeUpdateMark, setRow, setCol, getRowHeight, getColWidth, clearItems } = useSizeCollect(props)
+
+    const enabled = computed<VirtualScrollEnabled>(() => {
+      const enabled = props.virtual
+      let resolvedEnabled: VirtualScrollEnabled
+
+      if (enabled === true) {
+        resolvedEnabled = { horizontal: true, vertical: true }
+      } else if (!enabled) {
+        resolvedEnabled = { horizontal: false, vertical: false }
+      } else {
+        resolvedEnabled = enabled
+      }
+
+      return {
+        horizontal: resolvedEnabled.horizontal && props.width !== 0,
+        vertical: resolvedEnabled.vertical && props.height !== 0 && props.height !== 'auto',
+      }
+    })
 
     const containerRef = ref<HTMLElement>()
     const holderRef = ref<HTMLElement>()
-    const fillerRef = ref<HTMLElement>()
+    const fillerHorizontalRef = ref<HTMLElement>()
+    const fillerVerticalRef = ref<HTMLElement>()
 
-    const containerHeight = useContainerHeight(props, containerRef)
+    const containerSize = useContainerSize(props, containerRef)
 
-    const [scrollTop, changeScrollTop] = useState(0)
-    const { scrollHeight, scrollOffset, startIndex, endIndex } = useScrollState(
-      props,
-      fillerRef,
-      useVirtual,
-      getKey,
-      scrollTop,
-      containerHeight,
-      heightsUpdateMark,
-      heights,
-    )
+    const [scroll, changeScroll] = useState<Scroll>({ top: 0, left: 0 })
+
+    const {
+      scrollHeight,
+      scrollWidth,
+      scrollOffsetTop,
+      scrollOffsetLeft,
+      topIndex,
+      leftIndex,
+      rightIndex,
+      bottomIndex,
+    } = useScrollState(props, enabled, getKey, scroll, containerSize, sizeUpdateMark, getRowHeight, getColWidth)
 
-    const { syncScrollTop, handleScroll } = useScrollPlacement(
+    const { syncScroll, handleScroll } = useScrollPlacement(
       props,
       holderRef,
-      scrollTop,
+      scroll,
       scrollHeight,
-      containerHeight,
-      changeScrollTop,
+      scrollWidth,
+      containerSize,
+      changeScroll,
     )
 
+    const pool = useRenderPool(props, topIndex, bottomIndex, leftIndex, rightIndex, getKey)
+    const mergedData = computed(() => {
+      return pool.value.map(row => {
+        if (!isRowData(row.item)) {
+          return row.item
+        }
+
+        return {
+          ...row.item,
+          data: row.cols?.map(col => col.item) ?? [],
+        }
+      })
+    })
+
     provide(virtualScrollToken, {
       props,
       slots,
+      enabled,
       holderRef,
-      fillerRef,
+      fillerHorizontalRef,
+      fillerVerticalRef,
       useVirtual,
-      collectHeights,
-      scrollTop,
+      collectSize,
+      scroll,
       scrollHeight,
-      scrollOffset,
-      syncScrollTop,
+      scrollWidth,
+      scrollOffsetTop,
+      scrollOffsetLeft,
+      syncScroll,
       handleScroll,
+      topIndex,
+      bottomIndex,
+      leftIndex,
+      rightIndex,
+      renderedData: mergedData,
     })
 
-    const scrollTo = useScrollTo(props, holderRef, getKey, heights, collectHeights, syncScrollTop)
-    expose({ scrollTo, holderRef })
+    const scrollTo = useScrollTo(props, holderRef, getKey, getRowHeight, collectSize, syncScroll)
+    const getHolderElement = () => holderRef.value
+    expose({ scrollTo, getHolderElement })
+
+    watch([topIndex, leftIndex], () =>
+      callEmit(props.onScrolledChange, topIndex.value, bottomIndex.value, mergedData.value),
+    )
 
-    const mergedData = computed(() => props.dataSource.slice(startIndex.value, endIndex.value + 1))
-    watch(mergedData, data => callEmit(props.onScrolledChange, startIndex.value, endIndex.value, data))
+    onMounted(collectSize)
+    onUpdated(collectSize)
 
     return () => {
-      const getKeyFn = getKey.value
-      const start = startIndex.value
-      const itemRender = slots.item ?? props.itemRender
-      const children = mergedData.value.map((item, index) => {
-        const key = getKeyFn(item)
+      const rowRender = slots.row ?? slots.item ?? props.rowRender ?? props.itemRender
+      const colRender = slots.col ?? props.colRender
+
+      clearItems()
+
+      const rows = pool.value.map(row => {
+        const { key, item, itemKey, index } = row
+        if (!isRowData(item)) {
+          return (
+            <Row
+              key={key}
+              item={item}
+              index={index}
+              v-slots={{ default: rowRender }}
+              ref={instance => {
+                setRow(itemKey, instance as ComponentPublicInstance | null)
+                setCol(itemKey, itemKey, instance as ComponentPublicInstance | null)
+              }}
+            />
+          )
+        }
+
+        const cols = row.cols?.map(col => {
+          const { key: colKey, item: colItem, itemKey: colItemKey, index: colIndex } = col
+
+          return (
+            <Col
+              key={colKey}
+              row={item}
+              rowIndex={index}
+              item={colItem}
+              index={colIndex}
+              v-slots={{ default: colRender }}
+              ref={instance => setCol(itemKey, colItemKey, instance as ComponentPublicInstance | null)}
+            />
+          )
+        })
+
         return (
-          <Item key={key} ref={instance => setItem(key, instance as ComponentPublicInstance | null)}>
-            {itemRender?.({ item, index: start + index })}
-          </Item>
+          <Row
+            key={key}
+            item={item}
+            index={index}
+            children={cols}
+            v-slots={{ default: rowRender }}
+            ref={instance => setRow(itemKey, instance as ComponentPublicInstance | null)}
+          />
         )
       })
 
       return (
         <div ref={containerRef} class="cdk-virtual-scroll">
-          <Holder>{children}</Holder>
+          <Holder>{rows}</Holder>
         </div>
       )
     }
diff --git a/packages/cdk/scroll/src/virtual/composables/useContainerHeight.ts b/packages/cdk/scroll/src/virtual/composables/useContainerSize.ts
similarity index 51%
rename from packages/cdk/scroll/src/virtual/composables/useContainerHeight.ts
rename to packages/cdk/scroll/src/virtual/composables/useContainerSize.ts
index d55062287..9eaaa50f2 100644
--- a/packages/cdk/scroll/src/virtual/composables/useContainerHeight.ts
+++ b/packages/cdk/scroll/src/virtual/composables/useContainerSize.ts
@@ -14,15 +14,23 @@ import { isNumber } from 'lodash-es'
 import { useResizeObserver } from '@idux/cdk/resize'
 import { useState } from '@idux/cdk/utils'
 
-export function useContainerHeight(
+export function useContainerSize(
   props: VirtualScrollProps,
   containerRef: Ref<HTMLElement | undefined>,
-): ComputedRef<number> {
-  const [height, setHeight] = useState(0)
+): ComputedRef<{ width: number; height: number }> {
+  const [size, setSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 })
   useResizeObserver(containerRef, entry => {
-    const { contentRect } = entry
-    setHeight(contentRect.height)
+    const {
+      contentRect: { height, width },
+    } = entry
+
+    if (height !== size.value.height || width !== size.value.width) {
+      setSize({ height, width })
+    }
   })
 
-  return computed(() => (isNumber(props.height) ? props.height : height.value))
+  return computed(() => ({
+    height: isNumber(props.height) ? props.height : size.value.height,
+    width: isNumber(props.width) ? props.width : size.value.width,
+  }))
 }
diff --git a/packages/cdk/scroll/src/virtual/composables/useHeights.ts b/packages/cdk/scroll/src/virtual/composables/useHeights.ts
deleted file mode 100644
index ff45f7125..000000000
--- a/packages/cdk/scroll/src/virtual/composables/useHeights.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
- */
-
-import type { VKey } from '@idux/cdk/utils'
-import type { ComponentPublicInstance, Ref } from 'vue'
-
-import { ref } from 'vue'
-
-import { convertElement } from '@idux/cdk/utils'
-
-export interface HeightsContext {
-  heights: Map<VKey, number>
-  collectHeights: () => void
-  heightsUpdateMark: Ref<number>
-  setItem: (key: VKey, item: ComponentPublicInstance | null) => void
-}
-
-export function useHeights(): HeightsContext {
-  const itemMap = new Map<VKey, HTMLElement>()
-  const heights = new Map<VKey, number>()
-
-  const heightsUpdateMark = ref(0)
-
-  let heightUpdateId = 0
-
-  const collectHeights = () => {
-    heightUpdateId += 1
-    const currentId = heightUpdateId
-    Promise.resolve().then(() => {
-      // Only collect when it's latest call
-      if (currentId !== heightUpdateId) {
-        return
-      }
-
-      itemMap.forEach((element, key) => {
-        if (element && element.offsetParent) {
-          const { offsetHeight } = element
-          if (heights.get(key) !== offsetHeight) {
-            heights.set(key, offsetHeight)
-          }
-        }
-      })
-
-      heightsUpdateMark.value++
-    })
-  }
-
-  const setItem = (key: VKey, item: ComponentPublicInstance | null) => {
-    const element = convertElement(item)
-    if (element) {
-      itemMap.set(key, element)
-      collectHeights()
-    } else {
-      itemMap.delete(key)
-    }
-  }
-
-  return { heights, collectHeights, heightsUpdateMark, setItem }
-}
diff --git a/packages/cdk/scroll/src/virtual/composables/useRenderPool.ts b/packages/cdk/scroll/src/virtual/composables/useRenderPool.ts
new file mode 100644
index 000000000..d81e265f8
--- /dev/null
+++ b/packages/cdk/scroll/src/virtual/composables/useRenderPool.ts
@@ -0,0 +1,260 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { GetKey } from './useGetKey'
+import type { VirtualScrollProps, VirtualScrollRowData } from '../types'
+import type { VKey } from '@idux/cdk/utils'
+
+import { type ComputedRef, type Ref, onUnmounted, ref, watch } from 'vue'
+
+import { isRowData } from '../utils'
+
+interface PoolItem {
+  key: string
+  item: unknown | VirtualScrollRowData
+  itemKey: VKey
+  index: number
+  isCustomKey?: boolean
+}
+
+interface RowPoolItem extends PoolItem {
+  cols?: PoolItem[]
+}
+
+/**
+ * we use a render pool to reuse rendered components and dom elements
+ *
+ * rendered items are pushed to a render pool, whenever it's removed from rendered data, reuse the pooled item if possiable
+ *
+ * vue diffs list vnodes according to their key and props,
+ * so when a pooled item is resused to render new item content,
+ * orianginal component is only updated instead of creating a new one
+ *
+ * if the component's vnode tree is stable, this ensures that dom elements are stable as well,
+ * which makes performance as optimal as possiable
+ */
+
+export function useRenderPool(
+  props: VirtualScrollProps,
+  topIndex: Ref<number>,
+  bottomIndex: Ref<number>,
+  leftIndex: Ref<number[]>,
+  rightIndex: Ref<number[]>,
+  getKey: ComputedRef<GetKey>,
+): Ref<RowPoolItem[]> {
+  let poolSeed = 0
+
+  const rowPool = ref<RowPoolItem[]>([])
+  let rowInactivePool: RowPoolItem[] = []
+  let colInactivePools: Record<string, PoolItem[]> = {}
+
+  const createPoolKey = () => {
+    return `pool-${poolSeed++}`
+  }
+
+  const getPoolItem = (inactivePool: PoolItem[], key?: string): PoolItem => {
+    if (key) {
+      return {
+        key,
+        isCustomKey: true,
+      } as PoolItem
+    }
+
+    if (inactivePool.length > 0) {
+      return inactivePool.pop()!
+    }
+
+    return {
+      key: createPoolKey(),
+    } as PoolItem
+  }
+
+  const updatePool = (
+    pool: PoolItem[],
+    inactivePool: PoolItem[],
+    data: unknown[],
+    start: number,
+    end: number,
+    recycleAll: boolean,
+  ) => {
+    const inactiveKeys = new Set<string>(recycleAll ? pool.map(poolItem => poolItem.key) : [])
+    let updated = false
+
+    for (const poolItem of pool) {
+      if (poolItem.index < start || poolItem.index > end || poolItem.isCustomKey) {
+        inactiveKeys.add(poolItem.key)
+
+        // pool items with custom key shouldn't be resused
+        if (!poolItem.isCustomKey) {
+          inactivePool.push(poolItem)
+        }
+      }
+    }
+
+    updated = !!inactiveKeys.size
+
+    const poolMap = new Map(pool.map(poolItem => [poolItem.itemKey, poolItem]))
+    const poolKeySet = new Set(pool.map(poolItem => poolItem.key))
+
+    for (let index = start; index <= end; index++) {
+      const item = data[index]
+      if (!item) {
+        continue
+      }
+
+      const itemKey = getKey.value(item)
+      const existedPoolItem = poolMap.get(itemKey)
+
+      // item still active, continue
+      if (existedPoolItem && !inactiveKeys.has(existedPoolItem.key)) {
+        continue
+      }
+
+      // create a new pooled item
+      const poolItem = getPoolItem(inactivePool)
+      inactiveKeys.delete(poolItem.key)
+      poolItem.item = item
+      poolItem.index = index
+      poolItem.itemKey = itemKey
+
+      // if an inactive item is resued, remove it from deleted item list
+      if (!poolKeySet.has(poolItem.key)) {
+        pool.push(poolItem)
+      }
+
+      updated = true
+    }
+
+    // remove deleted items
+    for (const inactiveKey of inactiveKeys) {
+      const index = pool.findIndex(pi => pi.key === inactiveKey)
+
+      if (index > -1) {
+        pool.splice(index, 1)
+      }
+    }
+
+    // only resort the items when pool updated
+    if (updated) {
+      pool.sort((item1, item2) => item1.index - item2.index)
+    }
+  }
+
+  const updateColPool = (rowPoolItem: RowPoolItem, left: number, right: number, recycleAll: boolean) => {
+    if (!isRowData(rowPoolItem.item) || !rowPoolItem.item.data) {
+      return
+    }
+
+    if (!rowPoolItem.cols) {
+      rowPoolItem.cols = []
+    }
+
+    let inactivePool = colInactivePools[rowPoolItem.key]
+    if (!inactivePool) {
+      inactivePool = []
+      colInactivePools[rowPoolItem.key] = inactivePool
+    }
+
+    updatePool(rowPoolItem.cols, inactivePool, rowPoolItem.item.data, left, right, recycleAll)
+
+    if (!props.colModifier) {
+      return
+    }
+
+    const renderedCols = rowPoolItem.cols.map(poolItem => poolItem.item)
+    const { start: prependedCols, end: appendedCols } = props.colModifier(rowPoolItem.item, renderedCols) ?? {}
+
+    // append modified data to pool
+    ;[...(prependedCols ?? [])].reverse().forEach(({ data, index, poolKey }) => {
+      const poolItem = getPoolItem(rowInactivePool, poolKey) as RowPoolItem
+      poolItem.item = data
+      poolItem.index = index
+      poolItem.itemKey = getKey.value(data)
+      rowPoolItem.cols!.unshift(poolItem)
+    })
+    appendedCols?.forEach(({ data, index, poolKey }) => {
+      const poolItem = getPoolItem(rowInactivePool, poolKey) as RowPoolItem
+      poolItem.item = data
+      poolItem.index = index
+      poolItem.itemKey = getKey.value(data)
+      rowPoolItem.cols!.push(poolItem)
+    })
+  }
+
+  const updateRowPool = (top: number, bottom: number, recycleAll: boolean) => {
+    updatePool(rowPool.value, rowInactivePool, props.dataSource, top, bottom, recycleAll)
+
+    if (!props.rowModifier) {
+      return
+    }
+
+    const renderedRows = rowPool.value.map(poolItem => poolItem.item)
+    const { start: prependedRows, end: appendedRows } = props.rowModifier(renderedRows) ?? {}
+
+    ;[...(prependedRows ?? [])].reverse().forEach(({ data, index, poolKey }) => {
+      const poolItem = getPoolItem(rowInactivePool, poolKey) as RowPoolItem
+      poolItem.item = data
+      poolItem.index = index
+      poolItem.itemKey = getKey.value(data)
+      rowPool.value.unshift(poolItem)
+    })
+    appendedRows?.forEach(({ data, index, poolKey }) => {
+      const poolItem = getPoolItem(rowInactivePool, poolKey) as RowPoolItem
+      poolItem.item = data
+      poolItem.index = index
+      poolItem.itemKey = getKey.value(data)
+      rowPool.value.push(poolItem)
+    })
+  }
+
+  let isUpdating = false
+  const update = (recycleAll = false) => {
+    if (isUpdating || (!props.dataSource.length && !recycleAll)) {
+      return
+    }
+    isUpdating = true
+
+    updateRowPool(topIndex.value, bottomIndex.value, recycleAll)
+
+    rowPool.value.forEach((poolItem, index) => {
+      updateColPool(poolItem, leftIndex.value[index], rightIndex.value[index], recycleAll)
+    })
+
+    isUpdating = false
+  }
+
+  // update all pool items insteadof patch it
+  // this will always trigger rerender, so only do it when dataSource is updated
+  watch(
+    () => props.dataSource,
+    () => {
+      update(true)
+    },
+    {
+      deep: true,
+    },
+  )
+  watch(
+    [topIndex, bottomIndex, leftIndex, rightIndex],
+    () => {
+      update()
+    },
+    {
+      immediate: true,
+      flush: 'post',
+      deep: true,
+    },
+  )
+
+  onUnmounted(() => {
+    rowPool.value = []
+    rowInactivePool = []
+    colInactivePools = {}
+  })
+
+  return rowPool
+}
diff --git a/packages/cdk/scroll/src/virtual/composables/useScrollPlacement.ts b/packages/cdk/scroll/src/virtual/composables/useScrollPlacement.ts
index 8f0632598..de6975c2c 100644
--- a/packages/cdk/scroll/src/virtual/composables/useScrollPlacement.ts
+++ b/packages/cdk/scroll/src/virtual/composables/useScrollPlacement.ts
@@ -10,52 +10,72 @@ import type { Ref } from 'vue'
 
 import { computed, onActivated } from 'vue'
 
-import { isFunction } from 'lodash-es'
+import { isFunction, isNil } from 'lodash-es'
 
 import { callEmit } from '@idux/cdk/utils'
 
-export type SyncScrollTop = (newTop: number | ((prev: number) => number), setHolderScrollTop?: boolean) => void
+export type Scroll = { top?: number; left?: number }
+export type SyncScroll = (newScroll: Scroll | ((prev: Scroll) => Scroll), setHolderScroll?: boolean) => void
 
 export interface ScrollPlacementContext {
-  syncScrollTop: SyncScrollTop
+  syncScroll: SyncScroll
   handleScroll: (evt: Event) => void
 }
 
-const keepInRange = (maxScrollHeight: number, newScrollTop: number) => {
-  let newTop = Math.max(newScrollTop, 0)
-  if (!Number.isNaN(maxScrollHeight)) {
-    newTop = Math.min(newTop, maxScrollHeight)
+const keepInRange = (maxScrollSize: number, newScrollSize: number) => {
+  let newSize = Math.max(newScrollSize, 0)
+  if (!Number.isNaN(maxScrollSize)) {
+    newSize = Math.min(newSize, maxScrollSize)
   }
-  return newTop
+  return newSize
 }
 
 export function useScrollPlacement(
   props: VirtualScrollProps,
   holderRef: Ref<HTMLElement | undefined>,
-  scrollTop: Ref<number>,
+  scroll: Ref<Scroll>,
   scrollHeight: Ref<number>,
-  containerHeight: Ref<number>,
-  changeScrollTop: (value: number) => void,
+  scrollWidth: Ref<number>,
+  containerSize: Ref<{ width: number; height: number }>,
+  changeScroll: (value: Scroll) => void,
 ): ScrollPlacementContext {
   const maxScrollHeight = computed(() => {
     const height = scrollHeight.value
-    return height > 0 ? Math.max(height - containerHeight.value, 0) : NaN
+    return height > 0 ? Math.max(height - containerSize.value.height, 0) : NaN
   })
+  const maxScrollWidth = computed(() => {
+    const width = scrollWidth.value
+    return width > 0 ? Math.max(width - containerSize.value.width, 0) : NaN
+  })
+
+  const syncScroll: SyncScroll = (newScroll, setHolderScroll?: boolean) => {
+    const resolvedScroll = isFunction(newScroll) ? newScroll(scroll.value) : newScroll
+
+    if (isNil(resolvedScroll.top) && isNil(resolvedScroll.left)) {
+      return
+    }
+
+    const alignedTop = isNil(resolvedScroll.top)
+      ? scroll.value.top
+      : keepInRange(maxScrollHeight.value, resolvedScroll.top ?? 0)
+    const alignedLeft = isNil(resolvedScroll.left)
+      ? scroll.value.left
+      : keepInRange(maxScrollWidth.value, resolvedScroll.left ?? 0)
 
-  const syncScrollTop = (newTop: number | ((prev: number) => number), setHolderScrollTop?: boolean) => {
-    const value = isFunction(newTop) ? newTop(scrollTop.value) : newTop
-    const alignedTop = keepInRange(maxScrollHeight.value, value)
     const holderElement = holderRef.value
-    if (holderElement && setHolderScrollTop) {
-      holderElement.scrollTop = alignedTop
+
+    if (holderElement && setHolderScroll) {
+      holderElement.scrollTop = alignedTop ?? 0
+      holderElement.scrollLeft = alignedLeft ?? 0
     }
-    changeScrollTop(alignedTop)
+
+    changeScroll({ top: alignedTop, left: alignedLeft })
   }
 
   const handleScroll = (evt: Event) => {
-    const { scrollTop: newScrollTop } = evt.currentTarget as Element
-    if (newScrollTop !== scrollTop.value) {
-      syncScrollTop(newScrollTop)
+    const { scrollTop: newScrollTop, scrollLeft: newScrollLeft } = evt.currentTarget as Element
+    if (newScrollTop !== scroll.value.top || newScrollLeft !== scroll.value.left) {
+      syncScroll({ top: newScrollTop, left: newScrollLeft })
     }
     callEmit(props.onScroll, evt)
 
@@ -66,12 +86,12 @@ export function useScrollPlacement(
     }
   }
 
-  const initScrollTop = () => {
+  const initScroll = () => {
     if (holderRef.value) {
-      syncScrollTop(scrollTop.value, true)
+      syncScroll(scroll.value, true)
     }
   }
-  onActivated(initScrollTop)
+  onActivated(initScroll)
 
-  return { syncScrollTop, handleScroll }
+  return { syncScroll, handleScroll }
 }
diff --git a/packages/cdk/scroll/src/virtual/composables/useScrollState.ts b/packages/cdk/scroll/src/virtual/composables/useScrollState.ts
index f5b2d897f..d7fb02537 100644
--- a/packages/cdk/scroll/src/virtual/composables/useScrollState.ts
+++ b/packages/cdk/scroll/src/virtual/composables/useScrollState.ts
@@ -6,89 +6,227 @@
  */
 
 import type { GetKey } from './useGetKey'
-import type { VirtualScrollProps } from '../types'
+import type { Scroll } from './useScrollPlacement'
+import type { VirtualScrollEnabled, VirtualScrollProps, VirtualScrollRowData } from '../types'
 import type { VKey } from '@idux/cdk/utils'
 import type { ComputedRef, Ref } from 'vue'
 
 import { ref, watch } from 'vue'
 
+import { calcDataHeight, calcDataWidth, isNumArrayEqual, isRowData } from '../utils'
+
 export interface ScrollStateContext {
   scrollHeight: Ref<number>
-  scrollOffset: Ref<number | undefined>
-  startIndex: Ref<number>
-  endIndex: Ref<number>
+  scrollWidth: Ref<number>
+  scrollOffsetTop: Ref<number | undefined>
+  scrollOffsetLeft: Ref<number | undefined>
+  topIndex: Ref<number>
+  bottomIndex: Ref<number>
+  leftIndex: Ref<number[]>
+  rightIndex: Ref<number[]>
 }
 
 export function useScrollState(
   props: VirtualScrollProps,
-  fillerRef: Ref<HTMLElement | undefined>,
-  useVirtual: ComputedRef<boolean>,
+  enabled: ComputedRef<VirtualScrollEnabled>,
   getKey: ComputedRef<GetKey>,
-  scrollTop: Ref<number>,
-  containerHeight: ComputedRef<number>,
+  scroll: Ref<Scroll>,
+  containerSize: ComputedRef<{ width: number; height: number }>,
   heightUpdatedMark: Ref<number>,
-  heights: Map<VKey, number>,
+  getRowHeight: (rowKey: VKey) => number,
+  getColWidth: (rowKey: VKey, colKey: VKey) => number,
 ): ScrollStateContext {
   const scrollHeight = ref(0)
-  const scrollOffset = ref<number>()
-  const startIndex = ref(0)
-  const endIndex = ref(0)
+  const scrollWidth = ref(0)
+  const scrollOffsetTop = ref<number>()
+  const scrollOffsetLeft = ref<number>()
+
+  const topIndex = ref(0)
+  const bottomIndex = ref(0)
+  const rightIndex = ref<number[]>([])
+  const leftIndex = ref<number[]>([])
+
+  const setNumArray = (arr: number[], arrRef: Ref<number[]>) => {
+    if (!isNumArrayEqual(arr, arrRef.value)) {
+      arrRef.value = arr
+    }
+  }
+  const setNum = (num: number, numRef: Ref<number | undefined>) => {
+    if (num !== numRef.value) {
+      numRef.value = num
+    }
+  }
+
+  const getGridHorizontalIndex = (index: number[]) => {
+    if (props.isStrictGrid) {
+      return new Array(bottomIndex.value - topIndex.value + 1).fill(index[0])
+    }
+    return index
+  }
+
+  let calculated = false
+  let renderedHeight = 0
+  let renderedWidth = 0
 
   watch(
-    [useVirtual, () => props.dataSource, () => props.itemHeight, containerHeight, getKey, scrollTop, heightUpdatedMark],
-    ([virtual, dataSource, itemHeight, height, getKey, scrollTop]) => {
-      const {
-        scrollHeight: totalHeight,
-        offset,
-        start,
-        end,
-      } = calcState(fillerRef, virtual, dataSource, itemHeight, height, getKey, scrollTop, heights)
-      scrollHeight.value = totalHeight
-      scrollOffset.value = offset
-      startIndex.value = start
-      endIndex.value = end
+    [
+      enabled,
+      () => props.dataSource,
+      () => props.bufferSize,
+      () => props.rowHeight,
+      () => props.colWidth,
+      () => containerSize.value.height,
+      () => containerSize.value.width,
+      getKey,
+      scroll,
+      heightUpdatedMark,
+    ],
+    (
+      [enabled, dataSource, bufferSize, rowHeight, colWidth, height, width, getKey, scroll],
+      [, , , , , oldHeight, oldWidth],
+    ) => {
+      // to ensure that the rendered size is stable between render cycles
+      // the rendered size should be at least the size of that in last render tick
+      // we do this to maximize render pool reusage
+      let minHorizontalLength: number[] | undefined
+      let minVerticalLength: number | undefined
+      if (oldWidth === width) {
+        minHorizontalLength = rightIndex.value.map((_rightIndex, index) => _rightIndex - leftIndex.value[index])
+      }
+      if (oldHeight === height) {
+        minVerticalLength = bottomIndex.value - topIndex.value
+      }
+
+      const verticalState = calcVerticalState(
+        getKey,
+        enabled.vertical,
+        dataSource,
+        height,
+        rowHeight,
+        scroll.top ?? 0,
+        scrollOffsetTop.value ?? 0,
+        getRowHeight,
+        bufferSize,
+        props.bufferOffset,
+        renderedHeight,
+        minVerticalLength,
+        !calculated,
+      )
+
+      if (verticalState) {
+        setNum(verticalState.topIndex, topIndex)
+        setNum(verticalState.bottomIndex, bottomIndex)
+        setNum(verticalState.offsetTop, scrollOffsetTop)
+        setNum(verticalState.scrollHeight, scrollHeight)
+        renderedHeight = verticalState.renderedHeight
+      }
+
+      const isStrictGrid = props.isStrictGrid
+
+      const rows = isStrictGrid
+        ? [dataSource[topIndex.value]].filter(Boolean)
+        : dataSource.slice(topIndex.value, bottomIndex.value + 1)
+
+      const horizontalState = calcHorizontalState(
+        getKey,
+        enabled.horizontal,
+        rows,
+        width,
+        colWidth,
+        scroll.left ?? 0,
+        scrollOffsetLeft.value ?? 0,
+        getColWidth,
+        bufferSize,
+        props.bufferOffset,
+        renderedWidth,
+        minHorizontalLength,
+        !calculated || !!verticalState,
+      )
+
+      if (horizontalState) {
+        setNumArray(getGridHorizontalIndex(horizontalState.leftIndex), leftIndex)
+        setNumArray(getGridHorizontalIndex(horizontalState.rightIndex), rightIndex)
+        setNum(horizontalState.offsetLeft, scrollOffsetLeft)
+        setNum(horizontalState.scrollWidth, scrollWidth)
+        renderedWidth = horizontalState.renderedWidth
+      }
+
+      if (horizontalState && verticalState) {
+        calculated = true
+      }
     },
     { immediate: true },
   )
 
-  return { scrollHeight, scrollOffset, startIndex, endIndex }
+  return { scrollHeight, scrollWidth, scrollOffsetTop, scrollOffsetLeft, topIndex, bottomIndex, leftIndex, rightIndex }
 }
 
-function calcState(
-  fillerRef: Ref<HTMLElement | undefined>,
+function calcVerticalState(
+  getKey: GetKey,
   virtual: boolean,
-  dataSource: unknown[],
-  itemHeight: number,
+  rows: unknown[],
   height: number,
-  getKey: GetKey,
+  rowHeight: number,
   scrollTop: number,
-  heights: Map<VKey, number>,
+  currentOffsetTop: number,
+  getRowHeight: (rowKey: VKey) => number,
+  bufferSize: number,
+  bufferOffset: number,
+  renderedHeight: number,
+  minLength: number | undefined,
+  force: boolean,
 ) {
-  const dataLength = dataSource.length
-  // Always use virtual scroll bar in avoid shaking
-  if (!virtual || dataLength === 0 || itemHeight * dataLength <= height) {
-    return { scrollHeight: virtual ? fillerRef.value?.offsetHeight ?? 0 : 0, start: 0, end: dataLength - 1 }
+  // skip calcuation when height is 0
+  if (virtual && height === 0) {
+    return
+  }
+
+  const dataLength = rows.length
+
+  if (!virtual || dataLength === 0 || rowHeight * dataLength <= height) {
+    const scrollHeight = calcDataHeight(rows, getRowHeight, getKey)
+    return {
+      scrollHeight: virtual ? scrollHeight : 0,
+      topIndex: 0,
+      bottomIndex: dataLength === 0 ? 0 : dataLength - 1,
+      offsetTop: 0,
+      renderedHeight: scrollHeight,
+    }
+  }
+
+  const bufferOffsetDistance = bufferOffset * rowHeight
+
+  // skip caculation when current scroll hasent reached render window edge and size was caculated
+  if (
+    !force &&
+    !!bufferSize &&
+    scrollTop >= currentOffsetTop + bufferOffsetDistance &&
+    scrollTop <= currentOffsetTop + renderedHeight - height - bufferOffsetDistance
+  ) {
+    return
   }
 
   let scrollHeight = 0
-  let offset: number | undefined
-  let start: number | undefined
-  let end: number | undefined
+  let offsetTop = 0
+  let topIndex: number | undefined
+  let bottomIndex: number | undefined
+  let _renderedHeight = 0
 
   for (let index = 0; index < dataLength; index += 1) {
-    const item = dataSource[index]
-    const key = getKey(item)
-    const cacheHeight = heights.get(key)
-    const currentItemBottom = scrollHeight + (cacheHeight === undefined ? itemHeight : cacheHeight)
+    const rowHeight = getRowHeight(index)
+    const currentItemBottom = scrollHeight + rowHeight
+
+    if (currentItemBottom >= scrollTop && topIndex === undefined) {
+      topIndex = index
+      offsetTop = scrollHeight
+    }
 
-    if (currentItemBottom >= scrollTop && start === undefined) {
-      start = index
-      offset = scrollHeight
+    if (topIndex !== undefined && bottomIndex === undefined) {
+      _renderedHeight += rowHeight
     }
 
-    // Check item bottom in the range. We will render additional one item for motion usage
-    if (currentItemBottom > scrollTop + height && end === undefined) {
-      end = index
+    if (currentItemBottom > scrollTop + height && bottomIndex === undefined) {
+      bottomIndex = index
     }
 
     scrollHeight = currentItemBottom
@@ -96,16 +234,216 @@ function calcState(
 
   // Fallback to normal if not match. This code should never reach
   /* istanbul ignore next */
-  if (start === undefined) {
-    start = 0
-    offset = 0
+  if (topIndex === undefined) {
+    topIndex = 0
+    offsetTop = 0
+  }
+  if (bottomIndex === undefined) {
+    bottomIndex = dataLength - 1
+  }
+
+  // append buffered item
+  for (let index = 0; index < bufferSize; index += 1) {
+    if (topIndex !== 0) {
+      topIndex -= 1
+      const appendedRowHeight = getRowHeight(topIndex)
+      offsetTop! -= appendedRowHeight
+      _renderedHeight += appendedRowHeight
+    }
+
+    if (bottomIndex !== dataLength - 1) {
+      bottomIndex += 1
+      _renderedHeight += getRowHeight(bottomIndex)
+    }
+  }
+
+  // size fixing
+  for (
+    let index = 0;
+    index < getFixSize(rowHeight ? Math.ceil(height / rowHeight) : 0, minLength, topIndex, bottomIndex);
+    index += 1
+  ) {
+    if (bottomIndex !== dataLength - 1) {
+      bottomIndex += 1
+      _renderedHeight += getRowHeight(bottomIndex)
+    }
+  }
+
+  return {
+    scrollHeight,
+    topIndex,
+    bottomIndex,
+    offsetTop,
+    renderedHeight: _renderedHeight,
   }
-  if (end === undefined) {
-    end = dataLength - 1
+}
+
+function calcHorizontalState(
+  getKey: GetKey,
+  virtual: boolean,
+  rows: (unknown | VirtualScrollRowData)[],
+  width: number,
+  colWidth: number,
+  scrollLeft: number,
+  currentOffsetLeft: number,
+  getColWidth: (rowKey: VKey, colKey: VKey) => number,
+  bufferSize: number,
+  bufferOffset: number,
+  renderedWidth: number,
+  minLength: number[] | undefined,
+  force: boolean,
+) {
+  // skip caculation when width 0
+  if (virtual && width === 0) {
+    return
   }
 
-  // Give cache to improve scroll experience
-  end = Math.min(end + 1, dataLength)
+  const getRowColLength = (row: unknown | VirtualScrollRowData) => {
+    if (isRowData(row)) {
+      return row.data.length
+    }
+
+    return 1
+  }
+
+  const maxColLength = Math.max(...rows.map(row => getRowColLength(row)))
+
+  if (!virtual || rows.length === 0 || colWidth * maxColLength <= width) {
+    const scrollWidth = calcDataWidth(rows, getColWidth, getKey)
+    return {
+      scrollWidth: virtual ? scrollWidth : 0,
+      leftIndex: rows.map(() => 0),
+      rightIndex: rows.map(row => getRowColLength(row) - 1),
+      offsetLeft: 0,
+      renderedWidth: scrollWidth,
+    }
+  }
+
+  const bufferOffsetDistance = bufferOffset * colWidth
+
+  // skip caculation when current scroll hasent reached render window edge and size was caculated
+  if (
+    scrollLeft >= currentOffsetLeft + bufferOffsetDistance &&
+    scrollLeft <= currentOffsetLeft + renderedWidth - width - bufferOffsetDistance &&
+    !force &&
+    !!bufferSize
+  ) {
+    return
+  }
+
+  let scrollWidth = 0
+  let _renderedWidth = 0
+  let offsetLeft = 0
+  const windowRenderSize = colWidth ? Math.ceil(width / colWidth) : 0
+  const leftIndex: number[] = []
+  const rightIndex: number[] = []
+
+  for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+    const row = rows[rowIndex]
+
+    if (!isRowData(row)) {
+      leftIndex.push(0)
+      rightIndex.push(0)
+      continue
+    }
+
+    const rowKey = getKey(row)
+    let rowWidth = 0
+    let rowOffset = 0
+    let left: number | undefined
+    let right: number | undefined
+    let rowRenderedWidth = 0
+
+    for (let index = 0; index < row.data.length; index += 1) {
+      const colWidth = getColWidth(rowKey, getKey(row.data[index]))
+      const currentItemRight = rowWidth + colWidth
+
+      if (currentItemRight >= scrollLeft && left === undefined) {
+        left = index
+        rowOffset = rowOffset ? Math.min(rowOffset, rowWidth) : rowWidth
+      }
+
+      if (left !== undefined && right === undefined) {
+        rowRenderedWidth += colWidth
+      }
+
+      if (currentItemRight > scrollLeft + width && right === undefined) {
+        right = index
+      }
+
+      rowWidth = currentItemRight
+    }
+
+    // Fallback to normal if not match. This code should never reach
+    /* istanbul ignore next */
+    if (left === undefined) {
+      left = 0
+    }
+    if (right === undefined) {
+      right = row.data.length - 1
+    }
+
+    // append items according to buffer size
+    for (let index = 0; index < bufferSize; index += 1) {
+      if (left !== 0) {
+        left -= 1
+        const appendedColWidth = getColWidth(rowKey, getKey(row.data[left]))
+        rowOffset = rowOffset ? Math.max(0, rowOffset - appendedColWidth) : rowOffset
+        rowRenderedWidth += appendedColWidth
+      }
+
+      if (right !== row.data.length - 1) {
+        right += 1
+        rowRenderedWidth += getColWidth(rowKey, getKey(row.data[right]))
+      }
+    }
+
+    // size fixing
+    for (let index = 0; index < getFixSize(windowRenderSize, minLength?.[rowIndex], left, right); index += 1) {
+      if (right !== row.data.length - 1) {
+        right += 1
+        rowRenderedWidth += getColWidth(rowKey, getKey(row.data[right]))
+      }
+    }
+
+    leftIndex.push(left)
+    rightIndex.push(right)
+    scrollWidth = Math.max(scrollWidth, rowWidth)
+    _renderedWidth = Math.max(_renderedWidth, rowRenderedWidth)
+    offsetLeft = offsetLeft ? Math.min(offsetLeft, rowOffset) : rowOffset
+  }
+
+  if (offsetLeft === undefined) {
+    offsetLeft = 0
+  }
+
+  return {
+    scrollWidth,
+    leftIndex,
+    rightIndex,
+    offsetLeft,
+    renderedWidth: _renderedWidth,
+  }
+}
+
+/**
+ * fix current renderSize to last renderSize
+ *
+ * if fixSize is over maxFixSize, list item height is very unstable,
+ * size fixing will result in too many extra node render,
+ * which may cause the rendered size to be extreamly large constantly
+ * so we use max window render size fixing when this happens
+ */
+function getFixSize(windowRenderSize: number, minSize: number | undefined, start: number, end: number) {
+  const renderedSize = end - start
+
+  if (!minSize) {
+    return 0
+  }
+
+  if (renderedSize > minSize) {
+    return 0
+  }
 
-  return { scrollHeight, offset, start, end }
+  return Math.max(Math.min(minSize, windowRenderSize) - renderedSize, 0)
 }
diff --git a/packages/cdk/scroll/src/virtual/composables/useScrollTo.ts b/packages/cdk/scroll/src/virtual/composables/useScrollTo.ts
index 8fd2ffcf1..b289b3558 100644
--- a/packages/cdk/scroll/src/virtual/composables/useScrollTo.ts
+++ b/packages/cdk/scroll/src/virtual/composables/useScrollTo.ts
@@ -5,8 +5,8 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { GetKey } from '../composables/useGetKey'
-import type { SyncScrollTop } from '../composables/useScrollPlacement'
+import type { GetKey } from './useGetKey'
+import type { SyncScroll } from './useScrollPlacement'
 import type { VirtualScrollProps, VirtualScrollToFn, VirtualScrollToOptions } from '../types'
 import type { VKey } from '@idux/cdk/utils'
 import type { ComputedRef, Ref } from 'vue'
@@ -19,9 +19,9 @@ export function useScrollTo(
   props: VirtualScrollProps,
   holderRef: Ref<HTMLElement | undefined>,
   getKey: ComputedRef<GetKey>,
-  heights: Map<VKey, number>,
-  collectHeight: () => void,
-  syncScrollTop: SyncScrollTop,
+  getRowHeight: (rowKey: VKey) => number,
+  collectSize: () => void,
+  syncScroll: SyncScroll,
 ): VirtualScrollToFn {
   let refId: number
 
@@ -33,10 +33,10 @@ export function useScrollTo(
 
     // Normal scroll logic
     cancelRAF(refId)
-    const { dataSource, itemHeight } = props
+    const { dataSource, rowHeight, itemHeight } = props
 
     if (typeof option === 'number') {
-      syncScrollTop(option, true)
+      syncScroll({ top: option }, true)
     } else if (typeof option === 'object') {
       const { align, offset = 0 } = option
       let index: number
@@ -47,14 +47,14 @@ export function useScrollTo(
       }
 
       // We will retry 3 times in case dynamic height shaking
-      const syncScroll = (times: number, targetAlign?: 'top' | 'bottom') => {
+      const _syncScroll = (times: number, targetAlign?: 'top' | 'bottom') => {
         const holderElement = holderRef.value
         if (times < 0 || !holderElement) {
           return
         }
 
         const height = holderElement.clientHeight
-        let needCollectHeight = false
+        let needCollectSize = false
         let newTargetAlign = targetAlign
 
         // Go to next frame if height not exist
@@ -69,13 +69,13 @@ export function useScrollTo(
           for (let i = 0; i <= index; i++) {
             const itemKey = getKey.value(dataSource[i])
             itemTop = stackTop
-            const cacheHeight = heights.get(itemKey)
-            itemBottom = itemTop + (isNil(cacheHeight) ? itemHeight! : cacheHeight)
+            const cacheHeight = getRowHeight(itemKey)
+            itemBottom = itemTop + (isNil(cacheHeight) ? rowHeight ?? itemHeight! : cacheHeight)
 
             stackTop = itemBottom
 
             if (i === index && isNil(cacheHeight)) {
-              needCollectHeight = true
+              needCollectSize = true
             }
           }
 
@@ -84,10 +84,10 @@ export function useScrollTo(
 
           switch (mergedAlign) {
             case 'top':
-              targetTop = itemTop - offset
+              targetTop = Math.max(itemTop - offset, 0)
               break
             case 'bottom':
-              targetTop = itemBottom - height + offset
+              targetTop = Math.max(itemBottom - height + offset, 0)
               break
 
             default: {
@@ -102,20 +102,20 @@ export function useScrollTo(
           }
 
           if (targetTop !== null && targetTop !== holderElement.scrollTop) {
-            syncScrollTop(targetTop, true)
+            syncScroll({ top: targetTop }, true)
           }
         }
 
         // We will retry since element may not sync height as it described
         refId = rAF(() => {
-          if (needCollectHeight) {
-            collectHeight()
+          if (needCollectSize) {
+            collectSize()
           }
-          syncScroll(times - 1, newTargetAlign)
+          _syncScroll(times - 1, newTargetAlign)
         })
       }
 
-      syncScroll(3)
+      _syncScroll(3)
     }
   }
 }
diff --git a/packages/cdk/scroll/src/virtual/composables/useSizeCollect.ts b/packages/cdk/scroll/src/virtual/composables/useSizeCollect.ts
new file mode 100644
index 000000000..579feaea8
--- /dev/null
+++ b/packages/cdk/scroll/src/virtual/composables/useSizeCollect.ts
@@ -0,0 +1,178 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { VirtualScrollProps, VirutalDataSizes } from '../types'
+import type { VKey } from '@idux/cdk/utils'
+import type { ComponentPublicInstance, Ref } from 'vue'
+
+import { ref } from 'vue'
+
+import { isNil } from 'lodash-es'
+
+import { convertElement } from '@idux/cdk/utils'
+
+export interface SizeCollectContext {
+  getRowHeight: (rowKey: VKey) => number
+  getColWidth: (rowKey: VKey, colKey: VKey) => number
+  collectSize: () => void
+  sizeUpdateMark: Ref<number>
+  setRow: (rowKey: VKey, row: ComponentPublicInstance | null) => void
+  setCol: (rowKey: VKey, colKey: VKey, col: ComponentPublicInstance | null) => void
+  clearItems: () => void
+}
+
+export function useSizeCollect(props: VirtualScrollProps): SizeCollectContext {
+  const itemMap = new Map<VKey, { row: HTMLElement; cols: Map<VKey, HTMLElement> }>()
+  const strictGridColMap = new Map<VKey, HTMLElement>()
+  const sizes: VirutalDataSizes = new Map()
+  const strictGridColSizes = new Map<VKey, number>()
+
+  const sizeUpdateMark = ref(0)
+
+  let sizeUpdateId = 0
+
+  const setRowHeight = (rowKey: VKey, height: number | undefined) => {
+    if (isNil(height)) {
+      return false
+    }
+
+    const rowSize = sizes.get(rowKey)
+
+    if (!rowSize) {
+      sizes.set(rowKey, { height, colWidths: new Map<VKey, number>() })
+      return true
+    }
+
+    if (rowSize.height != height) {
+      rowSize.height = height
+      return true
+    }
+
+    return false
+  }
+  const setColWidth = (colWidths: Map<VKey, number> | undefined, colKey: VKey, width: number | undefined) => {
+    if (!width) {
+      return false
+    }
+
+    if (!colWidths) {
+      return false
+    }
+
+    const currentColWidth = colWidths.get(colKey)
+
+    if (currentColWidth !== width) {
+      colWidths.set(colKey, width)
+      return true
+    }
+
+    return false
+  }
+  const updateRowHeight = (rowKey: VKey, row: HTMLElement) => {
+    return setRowHeight(rowKey, row.getBoundingClientRect().height)
+  }
+  const updateColWidth = (rowKey: VKey | undefined, colKey: VKey, col: HTMLElement) => {
+    const colWidths = props.isStrictGrid ? strictGridColSizes : isNil(rowKey) ? undefined : sizes.get(rowKey)?.colWidths
+    const width = col.getBoundingClientRect().width
+    return setColWidth(colWidths, colKey, width)
+  }
+
+  const collectSize = () => {
+    sizeUpdateId += 1
+    const currentId = sizeUpdateId
+
+    setTimeout(() => {
+      // Only collect when it's latest call
+      if (currentId !== sizeUpdateId) {
+        return
+      }
+
+      let updated = false
+
+      itemMap.forEach(({ row, cols }, rowKey) => {
+        if (!row || !row.offsetParent) {
+          return
+        }
+
+        const rowUpdated = updateRowHeight(rowKey, row)
+        updated = updated || rowUpdated
+
+        if (!props.isStrictGrid) {
+          cols.forEach((col, colKey) => {
+            const colUpdated = updateColWidth(rowKey, colKey, col)
+            updated = updated || colUpdated
+          })
+        }
+      })
+
+      if (props.isStrictGrid) {
+        strictGridColMap.forEach((col, colKey) => {
+          const colUpdated = updateColWidth(undefined, colKey, col)
+          updated = updated || colUpdated
+        })
+      }
+
+      if (updated) {
+        sizeUpdateMark.value++
+      }
+    })
+  }
+
+  const setRow = (rowKey: VKey, row: ComponentPublicInstance | null) => {
+    const rowEl = convertElement(row)
+
+    if (!rowEl) {
+      itemMap.delete(rowKey)
+      return
+    }
+
+    const existedRow = itemMap.get(rowKey)
+
+    if (existedRow) {
+      existedRow.row = rowEl
+    } else {
+      itemMap.set(rowKey, { row: rowEl, cols: new Map<VKey, HTMLElement>() })
+    }
+  }
+
+  const setCol = (rowKey: VKey, colKey: VKey, col: ComponentPublicInstance | null) => {
+    if (props.isStrictGrid && strictGridColMap.has(colKey)) {
+      return
+    }
+
+    const colEl = convertElement(col)
+
+    // when the grid is strictly aligned, collect rendered col only once
+    const cols = props.isStrictGrid ? strictGridColMap : itemMap.get(rowKey)?.cols
+
+    if (!cols) {
+      return
+    }
+
+    if (!colEl) {
+      cols.delete(colKey)
+    } else {
+      cols.set(colKey, colEl)
+    }
+  }
+
+  const getRowHeight = (rowKey: VKey) => {
+    return sizes.get(rowKey)?.height ?? props.rowHeight
+  }
+  const getColWidth = (rowKey: VKey, colKey: VKey) => {
+    return (
+      (props.isStrictGrid ? strictGridColSizes.get(colKey) : sizes.get(rowKey)?.colWidths.get(colKey)) ?? props.colWidth
+    )
+  }
+
+  const clearItems = () => {
+    itemMap.clear()
+    strictGridColMap.clear()
+  }
+
+  return { collectSize, sizeUpdateMark, setRow, setCol, getRowHeight, getColWidth, clearItems }
+}
diff --git a/packages/cdk/scroll/src/virtual/contents/Col.tsx b/packages/cdk/scroll/src/virtual/contents/Col.tsx
new file mode 100644
index 000000000..183a69b3e
--- /dev/null
+++ b/packages/cdk/scroll/src/virtual/contents/Col.tsx
@@ -0,0 +1,34 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { VirtualColRenderFn, VirtualScrollRowData } from '../types'
+import type { FunctionalComponent } from 'vue'
+
+import { getFirstValidNode, useKey } from '@idux/cdk/utils'
+
+const Col: FunctionalComponent<{
+  row: VirtualScrollRowData
+  rowIndex: number
+  item: unknown
+  index: number
+}> = (props, { slots }) => {
+  const key = useKey()
+  const { row, rowIndex, item, index } = props
+  const render = slots.default as VirtualColRenderFn
+
+  const nodes = render({ row, rowIndex, item, index })
+
+  const node = getFirstValidNode(nodes)
+
+  if (node) {
+    node.key = key
+  }
+
+  return node
+}
+
+export default Col
diff --git a/packages/cdk/scroll/src/virtual/contents/Holder.tsx b/packages/cdk/scroll/src/virtual/contents/Holder.tsx
index 9d5e21536..027b9d310 100644
--- a/packages/cdk/scroll/src/virtual/contents/Holder.tsx
+++ b/packages/cdk/scroll/src/virtual/contents/Holder.tsx
@@ -7,7 +7,7 @@
 
 import { type CSSProperties, computed, defineComponent, inject, onBeforeUnmount, onMounted, ref } from 'vue'
 
-import { isString, throttle } from 'lodash-es'
+import { isNumber, isString, throttle } from 'lodash-es'
 
 import { offResize, onResize } from '@idux/cdk/resize'
 import { convertCssPixel } from '@idux/cdk/utils'
@@ -19,50 +19,68 @@ export default defineComponent({
     const {
       props,
       slots: virtualScrollSlots,
+      enabled,
       holderRef,
-      fillerRef,
-      collectHeights,
+      fillerHorizontalRef,
+      fillerVerticalRef,
+      collectSize,
       scrollHeight,
-      scrollOffset,
+      scrollWidth,
+      scrollOffsetLeft,
+      scrollOffsetTop,
       handleScroll,
+      topIndex,
+      bottomIndex,
+      leftIndex,
+      rightIndex,
+      renderedData,
     } = inject(virtualScrollToken)!
 
     const style = computed<CSSProperties | undefined>(() => {
-      const { height, fullHeight } = props
-      if (!height || height <= 0) {
-        return undefined
-      }
+      const { height, fullHeight, width, fullWidth } = props
+
+      const resolvedHeight = convertSize(height)
+      const resolvedWidth = convertSize(width)
 
-      if (isString(height)) {
-        return { height }
+      if (!resolvedHeight && !resolvedWidth) {
+        return
       }
 
-      return { [fullHeight ? 'height' : 'maxHeight']: convertCssPixel(height) }
+      return {
+        [fullHeight || isString(height) ? 'height' : 'maxHeight']: resolvedHeight,
+        [fullWidth || isString(width) ? 'width' : 'maxWidth']: resolvedWidth,
+      }
     })
 
-    const fillerStyle = computed<CSSProperties | undefined>(() => {
-      if (scrollOffset.value === undefined) {
+    const fillerVerticalStyle = computed<CSSProperties | undefined>(() => {
+      if (scrollOffsetTop.value === undefined) {
         return undefined
       }
-      return { height: `${scrollHeight.value}px` }
+      return { height: `${scrollHeight.value}px`, width: 0 }
+    })
+    const fillerHorizontalStyle = computed<CSSProperties | undefined>(() => {
+      if (scrollOffsetLeft.value === undefined) {
+        return undefined
+      }
+
+      return { width: `${scrollWidth.value}px`, height: 0 }
     })
 
     const contentStyle = computed<CSSProperties | undefined>(() => {
-      const offset = scrollOffset.value
-      if (offset === undefined) {
+      const offsetTop = scrollOffsetTop.value
+      const offsetLeft = scrollOffsetLeft.value
+
+      if (offsetTop === undefined && offsetLeft == undefined) {
         return undefined
       }
       return {
-        transform: `translateY(${offset}px)`,
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        top: 0,
+        marginTop: convertCssPixel(offsetTop),
+        marginLeft: convertCssPixel(offsetLeft),
       }
     })
 
     const contentRef = ref<HTMLDivElement>()
-    const onContentResize = throttle(collectHeights, 16)
+    const onContentResize = throttle(collectSize, 16)
     // 这里不能用 useResizeObserver, 会有 test 爆栈警告, 具体原因后面再排查。
     onMounted(() => onResize(contentRef.value, onContentResize))
     onBeforeUnmount(() => offResize(contentRef.value, onContentResize))
@@ -72,13 +90,37 @@ export default defineComponent({
       const contentRender = virtualScrollSlots.content ?? props.contentRender
       return (
         <div ref={holderRef} class="cdk-virtual-scroll-holder" style={style.value} onScroll={handleScroll}>
-          <div ref={fillerRef} class="cdk-virtual-scroll-filler" style={fillerStyle.value}>
-            <div ref={contentRef} class="cdk-virtual-scroll-content" style={contentStyle.value}>
-              {contentRender ? contentRender(children) : children}
-            </div>
+          {enabled.value.horizontal && (
+            <div
+              ref={fillerHorizontalRef}
+              class="cdk-virtual-scroll-filler-horizontal"
+              style={fillerHorizontalStyle.value}
+            ></div>
+          )}
+          {enabled.value.vertical && (
+            <div
+              ref={fillerVerticalRef}
+              class="cdk-virtual-scroll-filler-vertical"
+              style={fillerVerticalStyle.value}
+            ></div>
+          )}
+          <div ref={contentRef} class="cdk-virtual-scroll-content" style={contentStyle.value}>
+            {contentRender
+              ? contentRender(children, {
+                  topIndex: topIndex.value,
+                  bottomIndex: bottomIndex.value,
+                  leftIndex: leftIndex.value,
+                  rightIndex: rightIndex.value,
+                  renderedData: renderedData.value,
+                })
+              : children}
           </div>
         </div>
       )
     }
   },
 })
+
+function convertSize(size: number | string | undefined) {
+  return !size || (isNumber(size) && size <= 0) ? undefined : isString(size) ? size : convertCssPixel(size)
+}
diff --git a/packages/cdk/scroll/src/virtual/contents/Item.tsx b/packages/cdk/scroll/src/virtual/contents/Item.tsx
deleted file mode 100644
index 237f28177..000000000
--- a/packages/cdk/scroll/src/virtual/contents/Item.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
- */
-
-import type { FunctionalComponent } from 'vue'
-
-const Item: FunctionalComponent = (_, { slots }) => {
-  const [firstChild] = slots.default!()
-  return firstChild
-}
-
-export default Item
diff --git a/packages/cdk/scroll/src/virtual/contents/Row.tsx b/packages/cdk/scroll/src/virtual/contents/Row.tsx
new file mode 100644
index 000000000..8861b14d0
--- /dev/null
+++ b/packages/cdk/scroll/src/virtual/contents/Row.tsx
@@ -0,0 +1,33 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { VirtualRowRenderFn } from '../types'
+import type { FunctionalComponent, VNode } from 'vue'
+
+import { getFirstValidNode, useKey } from '@idux/cdk/utils'
+
+const Row: FunctionalComponent<{
+  item: unknown
+  index: number
+  children?: VNode[]
+}> = (props, { slots }) => {
+  const key = useKey()
+  const { item, index, children } = props
+  const render = slots.default as VirtualRowRenderFn
+
+  const nodes = render({ item, index, children })
+
+  const node = getFirstValidNode(nodes)
+
+  if (node) {
+    node.key = key
+  }
+
+  return node
+}
+
+export default Row
diff --git a/packages/cdk/scroll/src/virtual/token.ts b/packages/cdk/scroll/src/virtual/token.ts
index e93f3e676..baa21a1c0 100644
--- a/packages/cdk/scroll/src/virtual/token.ts
+++ b/packages/cdk/scroll/src/virtual/token.ts
@@ -5,22 +5,31 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { SyncScrollTop } from './composables/useScrollPlacement'
-import type { VirtualScrollProps } from './types'
+import type { Scroll, SyncScroll } from './composables/useScrollPlacement'
+import type { VirtualScrollEnabled, VirtualScrollProps } from './types'
 import type { ComputedRef, InjectionKey, Ref, Slots } from 'vue'
 
 export interface VirtualScrollContext {
   props: VirtualScrollProps
   slots: Slots
+  enabled: ComputedRef<VirtualScrollEnabled>
   holderRef: Ref<HTMLElement | undefined>
-  fillerRef: Ref<HTMLElement | undefined>
+  fillerHorizontalRef: Ref<HTMLElement | undefined>
+  fillerVerticalRef: Ref<HTMLElement | undefined>
   useVirtual: ComputedRef<boolean>
-  collectHeights: () => void
-  scrollTop: Ref<number>
+  collectSize: () => void
+  scroll: Ref<Scroll>
   scrollHeight: Ref<number>
-  scrollOffset: Ref<number | undefined>
-  syncScrollTop: SyncScrollTop
+  scrollWidth: Ref<number>
+  scrollOffsetTop: Ref<number | undefined>
+  scrollOffsetLeft: Ref<number | undefined>
+  syncScroll: SyncScroll
   handleScroll: (evt: Event) => void
+  topIndex: Ref<number>
+  bottomIndex: Ref<number>
+  leftIndex: Ref<number[]>
+  rightIndex: Ref<number[]>
+  renderedData: ComputedRef<unknown[]>
 }
 
 export const virtualScrollToken: InjectionKey<VirtualScrollContext> = Symbol('virtualScrollToken')
diff --git a/packages/cdk/scroll/src/virtual/types.ts b/packages/cdk/scroll/src/virtual/types.ts
index 19459d593..ad10cbecd 100644
--- a/packages/cdk/scroll/src/virtual/types.ts
+++ b/packages/cdk/scroll/src/virtual/types.ts
@@ -10,15 +10,62 @@
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
 import type { DefineComponent, HTMLAttributes, PropType, VNode, VNodeChild } from 'vue'
 
+export interface VirtualScrollRowData<Col = unknown> {
+  [key: string]: any
+  data: Col[]
+}
+
+export interface RowSize {
+  height: number
+  colWidths: Map<VKey, number>
+}
+
+export type VirutalDataSizes = Map<VKey, RowSize>
+
+export interface ModifiedData {
+  data: any
+  index: number
+  poolKey?: string
+}
+
 export const virtualListProps = {
   contentRender: { type: Function as PropType<VirtualContentRenderFn>, default: undefined },
+  bufferSize: { type: Number, default: 0 },
+  bufferOffset: { type: Number, default: 0 },
   dataSource: { type: Array, default: (): unknown[] => [] },
-  fullHeight: { type: Boolean, default: false },
+  rowModifier: {
+    type: Function as PropType<(renderedRows: any[]) => { start?: ModifiedData[]; end?: ModifiedData[] } | undefined>,
+  },
+  colModifier: {
+    type: Function as PropType<
+      (renderedRow: any, renderedCols: any[]) => { start?: ModifiedData[]; end?: ModifiedData[] } | undefined
+    >,
+  },
   getKey: { type: [String, Function] as PropType<string | ((item: any) => VKey)>, default: 'key' },
-  height: { type: [Number, String] as PropType<number | 'auto' | '100%'>, default: 0 },
+  height: { type: [Number, String] as PropType<number | 'auto' | '100%'>, default: 'auto' },
+  fullHeight: { type: Boolean, default: false },
+  /**
+   * @deprecated use rowHeight instead
+   */
   itemHeight: { type: Number, default: 0 },
-  itemRender: { type: Function as PropType<VirtualItemRenderFn>, default: undefined },
-  virtual: { type: Boolean, default: true },
+  rowHeight: { type: Number, default: 0 },
+  width: { type: [Number, String] as PropType<number | '100%'>, default: '100%' },
+  fullWidth: { type: Boolean, default: true },
+  colWidth: { type: Number, default: 0 },
+  /**
+   * @deprecated use rowRender instead
+   */
+  itemRender: { type: Function as PropType<VirtualRowRenderFn>, default: undefined },
+  rowRender: { type: Function as PropType<VirtualRowRenderFn>, default: undefined },
+  colRender: { type: Function as PropType<VirtualColRenderFn>, default: undefined },
+  virtual: {
+    type: [Boolean, Object] as PropType<boolean | VirtualScrollEnabled>,
+    default: (): VirtualScrollEnabled => ({ horizontal: false, vertical: true }),
+  },
+  isStrictGrid: {
+    type: Boolean,
+    default: true,
+  },
   onScroll: [Function, Array] as PropType<MaybeArray<(evt: Event) => void>>,
   onScrolledChange: [Function, Array] as PropType<
     MaybeArray<(startIndex: number, endIndex: number, visibleData: any[]) => void>
@@ -30,6 +77,7 @@ export type VirtualScrollProps = ExtractInnerPropTypes<typeof virtualListProps>
 export type VirtualScrollPublicProps = ExtractPublicPropTypes<typeof virtualListProps>
 export interface VirtualScrollBindings {
   scrollTo: VirtualScrollToFn
+  getHolderElement: () => HTMLDivElement
 }
 export type VirtualScrollComponent = DefineComponent<
   Omit<HTMLAttributes, keyof VirtualScrollPublicProps> & VirtualScrollPublicProps,
@@ -42,5 +90,22 @@ export type VirtualScrollToOptions = { align?: 'top' | 'bottom' | 'auto'; offset
   | { index: number }
 )
 export type VirtualScrollToFn = (option?: number | VirtualScrollToOptions) => void
-export type VirtualItemRenderFn<T = any> = (option: { item: T; index: number }) => VNodeChild
-export type VirtualContentRenderFn = (children: VNode[]) => VNodeChild
+export type VirtualRowRenderFn<Row = any> = (option: { item: Row; index: number; children?: VNode[] }) => VNodeChild
+export type VirtualColRenderFn<Row extends VirtualScrollRowData = VirtualScrollRowData<any>> = (option: {
+  row: Row
+  item: Row['data'][number]
+  index: number
+  rowIndex: number
+}) => VNodeChild
+export type VirtualContentRenderFn = (
+  children: VNode[],
+  options: {
+    renderedData: unknown[]
+    topIndex: number
+    bottomIndex: number
+    leftIndex: number[]
+    rightIndex: number[]
+  },
+) => VNodeChild
+
+export type VirtualScrollEnabled = { horizontal: boolean; vertical: boolean }
diff --git a/packages/cdk/scroll/src/virtual/utils.ts b/packages/cdk/scroll/src/virtual/utils.ts
new file mode 100644
index 000000000..caa7e56e3
--- /dev/null
+++ b/packages/cdk/scroll/src/virtual/utils.ts
@@ -0,0 +1,55 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { GetKey } from './composables/useGetKey'
+import type { VirtualScrollRowData } from './types'
+import type { VKey } from '@idux/cdk/utils'
+
+export function isRowData(row: unknown | VirtualScrollRowData): row is VirtualScrollRowData {
+  return 'data' in (row as VirtualScrollRowData)
+}
+
+export function calcDataHeight(
+  data: (unknown | VirtualScrollRowData)[],
+  getRowHeight: (rowKey: VKey) => number,
+  getKey: GetKey,
+): number {
+  let height = 0
+  for (const item of data) {
+    height += getRowHeight(getKey(item))
+  }
+
+  return height
+}
+
+export function calcDataWidth(
+  data: (unknown | VirtualScrollRowData)[],
+  getColWidth: (rowKey: VKey, colKey: VKey) => number,
+  getKey: GetKey,
+): number {
+  let width = 0
+
+  for (const row of data) {
+    let rowWidth = 0
+    if (!isRowData(row)) {
+      rowWidth = 0
+    } else {
+      const rowKey = getKey(row)
+      for (const col of row.data) {
+        rowWidth += getColWidth(rowKey, getKey(col))
+      }
+    }
+
+    width = Math.max(width, rowWidth)
+  }
+
+  return width
+}
+
+export function isNumArrayEqual(arr1: number[], arr2: number[]): boolean {
+  return arr1.length === arr2.length && arr1.every((num, idx) => num === arr2[idx])
+}
diff --git a/packages/cdk/scroll/style/index.less b/packages/cdk/scroll/style/index.less
index 6765109ad..68004516b 100644
--- a/packages/cdk/scroll/style/index.less
+++ b/packages/cdk/scroll/style/index.less
@@ -1,13 +1,11 @@
 .cdk-virtual-scroll {
-  position: relative;
-
   &-holder {
     overflow: auto;
     overflow-anchor: none;
   }
 
-  &-filler {
-    position: relative;
+  &-filler-vertical {
+    float: left;
   }
 
   &-content {
diff --git a/packages/cdk/utils/src/vNode.ts b/packages/cdk/utils/src/vNode.ts
index 425459ef2..2929584dd 100644
--- a/packages/cdk/utils/src/vNode.ts
+++ b/packages/cdk/utils/src/vNode.ts
@@ -37,7 +37,17 @@ function getValidNode(node: VNode, depth: number): VNode | undefined {
  * @param maxDepth depth to be searched, default is 3
  */
 export function getFirstValidNode(nodes: VNodeChild, maxDepth = 3): VNode | undefined {
-  return (convertArray(nodes) as VNode[]).find(node => getValidNode(node, maxDepth))
+  let validNode: VNode | undefined
+
+  for (const node of convertArray(nodes) as VNode[]) {
+    validNode = getValidNode(node, maxDepth)
+
+    if (validNode) {
+      break
+    }
+  }
+
+  return validNode
 }
 
 /**
diff --git a/packages/components/cascader/src/panel/Option.tsx b/packages/components/cascader/src/panel/Option.tsx
index c24af3ee4..de02f4bf1 100644
--- a/packages/components/cascader/src/panel/Option.tsx
+++ b/packages/components/cascader/src/panel/Option.tsx
@@ -9,7 +9,7 @@ import { type PropType, Slot, computed, defineComponent, inject, normalizeClass
 
 import { isNil } from 'lodash-es'
 
-import { callEmit, useKey } from '@idux/cdk/utils'
+import { callEmit } from '@idux/cdk/utils'
 import { IxCheckbox } from '@idux/components/checkbox'
 import { convertIconVNode } from '@idux/components/utils'
 
@@ -23,11 +23,11 @@ export default defineComponent({
     index: { type: Number, required: true },
     isLeaf: { type: Boolean, required: true },
     label: { type: String, required: true },
+    optionKey: { type: [String, Number, Symbol], required: true },
     parentKey: { type: [String, Number, Symbol], default: undefined },
     rawData: { type: Object as PropType<CascaderData>, required: true },
   },
   setup(props) {
-    const key = useKey()
     const {
       props: cascaderPanelProps,
       slots,
@@ -47,12 +47,12 @@ export default defineComponent({
       handleSelect,
       handleExpand,
     } = inject(cascaderPanelToken)!
-    const isActive = computed(() => key === activeKey.value)
+    const isActive = computed(() => props.optionKey === activeKey.value)
     const isDisabled = computed(() => mergedGetDisabled.value(props.rawData))
-    const isExpanded = computed(() => expandedKeys.value.includes(key))
-    const isLoading = computed(() => loadingKeys.value.includes(key))
-    const isSelected = computed(() => selectedWithStrategyKeys.value.includes(key))
-    const isIndeterminate = computed(() => indeterminateKeys.value.includes(key))
+    const isExpanded = computed(() => expandedKeys.value.includes(props.optionKey))
+    const isLoading = computed(() => loadingKeys.value.includes(props.optionKey))
+    const isSelected = computed(() => selectedWithStrategyKeys.value.includes(props.optionKey))
+    const isIndeterminate = computed(() => indeterminateKeys.value.includes(props.optionKey))
 
     const classes = computed(() => {
       const prefixCls = `${mergedPrefixCls.value}-option`
@@ -68,7 +68,7 @@ export default defineComponent({
     })
 
     const _handleSelect = () => {
-      handleSelect(key)
+      handleSelect(props.optionKey)
       callEmit(cascaderPanelProps.onSelect, props.rawData, isSelected.value)
     }
 
@@ -83,7 +83,7 @@ export default defineComponent({
         isNil(props.parentKey) && setExpandedKeys([])
       } else {
         cascaderPanelProps.strategy === 'off' && _handleSelect()
-        cascaderPanelProps.expandTrigger === 'click' && handleExpand(key)
+        cascaderPanelProps.expandTrigger === 'click' && handleExpand(props.optionKey)
       }
     }
 
@@ -92,8 +92,8 @@ export default defineComponent({
       _handleSelect()
     }
     const handleMouseEnter = () => {
-      setActiveKey(key)
-      !props.isLeaf && cascaderPanelProps.expandTrigger === 'hover' && handleExpand(key)
+      setActiveKey(props.optionKey)
+      !props.isLeaf && cascaderPanelProps.expandTrigger === 'hover' && handleExpand(props.optionKey)
     }
 
     return () => {
@@ -135,7 +135,7 @@ export default defineComponent({
           {!props.isLeaf && (
             <span key="__expand-icon" class={`${prefixCls}-expand-icon`}>
               {convertIconVNode(slots.expandIcon, isLoading.value ? 'loading' : mergedExpandIcon.value, {
-                key,
+                key: props.optionKey,
                 expanded: isExpanded.value,
                 data: rawData,
               })}
diff --git a/packages/components/cascader/src/panel/OptionGroup.tsx b/packages/components/cascader/src/panel/OptionGroup.tsx
index 2f755bfbf..43ac228fe 100644
--- a/packages/components/cascader/src/panel/OptionGroup.tsx
+++ b/packages/components/cascader/src/panel/OptionGroup.tsx
@@ -7,7 +7,7 @@
 
 import { type PropType, type VNode, computed, defineComponent, inject, normalizeClass } from 'vue'
 
-import { CdkVirtualScroll, type VirtualItemRenderFn } from '@idux/cdk/scroll'
+import { CdkVirtualScroll, type VirtualRowRenderFn } from '@idux/cdk/scroll'
 import { ɵEmpty } from '@idux/components/_private/empty'
 
 import Option from './Option'
@@ -34,14 +34,16 @@ export default defineComponent({
       let children: VNode
       if (dataSource.length > 0) {
         const { _virtualScrollHeight, virtualItemHeight, virtual } = cascaderPanelProps
-        const itemRender: VirtualItemRenderFn<MergedData> = ({ item, index }) => <Option index={index} {...item} />
+        const rowRender: VirtualRowRenderFn<MergedData> = ({ item, index }) => (
+          <Option index={index} optionKey={item.key} {...item} />
+        )
         children = (
           <CdkVirtualScroll
             dataSource={dataSource}
             getKey="key"
             height={_virtualScrollHeight}
-            itemHeight={virtualItemHeight}
-            itemRender={itemRender}
+            rowHeight={virtualItemHeight}
+            rowRender={rowRender}
             virtual={virtual}
           />
         )
diff --git a/packages/components/divider/demo/Plain.md b/packages/components/divider/demo/Plain.md
old mode 100755
new mode 100644
diff --git a/packages/components/divider/demo/Size.md b/packages/components/divider/demo/Size.md
old mode 100755
new mode 100644
diff --git a/packages/components/divider/demo/Vertical.md b/packages/components/divider/demo/Vertical.md
old mode 100755
new mode 100644
diff --git a/packages/components/locales/src/langs/zh-CN.ts b/packages/components/locales/src/langs/zh-CN.ts
old mode 100755
new mode 100644
diff --git a/packages/components/select/__tests__/select.spec.ts b/packages/components/select/__tests__/select.spec.ts
index ce7d76833..3e259c772 100644
--- a/packages/components/select/__tests__/select.spec.ts
+++ b/packages/components/select/__tests__/select.spec.ts
@@ -440,7 +440,7 @@ describe('Select', () => {
 
       const wrapper = SelectMount({ props: { virtual: true, open: true, dataSource } })
 
-      expect(wrapper.findAllComponents(Option).length).toBe(10)
+      expect(wrapper.findAllComponents(Option).length).toBe(9)
 
       await wrapper.setProps({ virtual: false })
 
diff --git a/packages/components/select/src/panel/Option.tsx b/packages/components/select/src/panel/Option.tsx
index eb958f61e..e73bbfaf0 100644
--- a/packages/components/select/src/panel/Option.tsx
+++ b/packages/components/select/src/panel/Option.tsx
@@ -9,7 +9,7 @@ import { computed, defineComponent, inject } from 'vue'
 
 import { isNil, toString } from 'lodash-es'
 
-import { callEmit, useKey } from '@idux/cdk/utils'
+import { callEmit } from '@idux/cdk/utils'
 import { IxCheckbox } from '@idux/components/checkbox'
 
 import { selectPanelContext } from '../token'
@@ -19,7 +19,6 @@ import { renderOptionLabel } from '../utils/renderOptionLabel'
 export default defineComponent({
   props: optionProps,
   setup(props, { slots }) {
-    const key = useKey()
     const {
       props: selectPanelProps,
       mergedPrefixCls,
@@ -30,9 +29,9 @@ export default defineComponent({
       setActiveIndex,
     } = inject(selectPanelContext)!
 
-    const isActive = computed(() => activeValue.value === key)
+    const isActive = computed(() => activeValue.value === props.optionKey)
 
-    const isSelected = computed(() => selectedKeys.value.some(selectedKey => selectedKey === key))
+    const isSelected = computed(() => selectedKeys.value.some(selectedKey => selectedKey === props.optionKey))
 
     const isDisabled = computed(() => props.disabled || (!isSelected.value && selectedLimit.value))
 
diff --git a/packages/components/select/src/panel/Panel.tsx b/packages/components/select/src/panel/Panel.tsx
index cf2f6901f..414bb8d1f 100644
--- a/packages/components/select/src/panel/Panel.tsx
+++ b/packages/components/select/src/panel/Panel.tsx
@@ -11,7 +11,7 @@ import { computed, defineComponent, inject, normalizeClass, provide, ref } from
 
 import {
   CdkVirtualScroll,
-  type VirtualItemRenderFn,
+  type VirtualRowRenderFn,
   type VirtualScrollInstance,
   type VirtualScrollToFn,
 } from '@idux/cdk/scroll'
@@ -99,12 +99,12 @@ export default defineComponent({
       const children = [<ListBox v-slots={slots} />]
 
       if (options.length > 0) {
-        const itemRender: VirtualItemRenderFn<FlattenedOption> = ({ item, index }) => {
-          const { type, ...rest } = item
+        const rowRender: VirtualRowRenderFn<FlattenedOption> = ({ item, index }) => {
+          const { type, key, ...rest } = item
           return type === 'group' ? (
             <OptionGroup v-slots={slots} index={index} {...rest} />
           ) : (
-            <Option v-slots={slots} index={index} {...rest} />
+            <Option v-slots={slots} index={index} optionKey={key} {...rest} />
           )
         }
 
@@ -114,8 +114,8 @@ export default defineComponent({
             dataSource={options}
             getKey="key"
             height={_virtualScrollHeight}
-            itemHeight={virtualItemHeight}
-            itemRender={itemRender}
+            rowHeight={virtualItemHeight}
+            rowRender={rowRender}
             virtual={virtual}
             onScroll={onScroll}
             onScrolledBottom={onScrolledBottom}
diff --git a/packages/components/select/src/types.ts b/packages/components/select/src/types.ts
index 6f0a04d0b..3f7e6b61c 100644
--- a/packages/components/select/src/types.ts
+++ b/packages/components/select/src/types.ts
@@ -172,6 +172,7 @@ export const optionProps = {
   disabled: { type: Boolean, default: false },
   index: { type: Number, required: true },
   label: { type: [String, Number] as PropType<string | number>, default: undefined },
+  optionKey: { type: [String, Number, Symbol] as PropType<VKey>, required: true },
   rawData: { type: Object as PropType<SelectOptionProps>, required: true },
   parentKey: { type: [String, Number, Symbol] as PropType<VKey>, default: undefined },
 } as const
diff --git a/packages/components/transfer/src/list/List.tsx b/packages/components/transfer/src/list/List.tsx
index dbc3fd3dc..431c8375b 100644
--- a/packages/components/transfer/src/list/List.tsx
+++ b/packages/components/transfer/src/list/List.tsx
@@ -7,7 +7,7 @@
 
 import { computed, defineComponent, normalizeClass, normalizeStyle, provide, ref } from 'vue'
 
-import { CdkVirtualScroll, type VirtualItemRenderFn, type VirtualScrollInstance } from '@idux/cdk/scroll'
+import { CdkVirtualScroll, type VirtualRowRenderFn, type VirtualScrollInstance } from '@idux/cdk/scroll'
 import { callEmit, convertCssPixel } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 
@@ -46,7 +46,7 @@ export default defineComponent({
       callEmit(props.onScrolledChange, startIndex, endIndex, visibleData)
     }
 
-    const renderListItem: VirtualItemRenderFn<TransferData> = ({ item, index }) => {
+    const renderListItem: VirtualRowRenderFn<TransferData> = ({ item, index }) => {
       const key = getKey(item)
       const onCheckChange = (checked: boolean) => {
         callEmit(props.onCheckChange, item, checked)
@@ -90,8 +90,8 @@ export default defineComponent({
             fullHeight={!!scroll?.fullHeight}
             getKey={getKey}
             height={(scroll?.height as number) ?? '100%'}
-            itemHeight={virtualItemHeight}
-            itemRender={renderListItem}
+            rowHeight={virtualItemHeight}
+            rowRender={renderListItem}
             virtual
             onScroll={handleScroll}
             onScrolledBottom={handleScrolledBottom}
diff --git a/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap b/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
index 00e15aa15..abd85e23c 100644
--- a/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
+++ b/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
@@ -374,49 +374,41 @@ exports[`Tree > height and virtual work 1`] = `
 "<div class=\\"ix-tree ix-tree-active ix-tree-virtual\\" role=\\"tree\\">
   <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
   <div class=\\"cdk-virtual-scroll ix-tree-content\\">
-    <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 100px;\\">
-      <div class=\\"cdk-virtual-scroll-filler\\" style=\\"height: 308px;\\">
-        <div class=\\"cdk-virtual-scroll-content\\" style=\\"transform: translateY(0px); position: absolute; left: 0px; right: 0px; top: 0px;\\">
-          <div class=\\"ix-tree-node ix-tree-node-expanded\\" aria-label=\\"Node 0\\" aria-selected=\\"false\\" title=\\"Node 0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"></span>
-            <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
-              <!---->
-              <!---->
-              <!---->
-            </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0</span>
-            <!----></span>
-          </div>
-          <div class=\\"ix-tree-node ix-tree-node-expanded\\" aria-label=\\"Node 0-0\\" aria-selected=\\"false\\" title=\\"Node 0-0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-            <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span><label class=\\"ix-checkbox ix-checkbox-checked ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"true\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
-              <!---->
-              <!---->
-              <!---->
-            </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0</span>
-            <!----></span>
-          </div>
-          <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-0-0\\" aria-selected=\\"false\\" title=\\"Node 0-0-0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-            <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
-              <!---->
-              <!---->
-              <!---->
-            </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0-0</span>
-            <!----></span>
-          </div>
-          <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-0-1\\" aria-selected=\\"false\\" title=\\"Node 0-0-1\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-            <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
-              <!---->
-              <!---->
-              <!---->
-            </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0-1</span>
-            <!----></span>
-          </div>
-          <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-0-2\\" aria-selected=\\"false\\" title=\\"Node 0-0-2\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-            <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
-              <!---->
-              <!---->
-              <!---->
-            </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0-2</span>
-            <!----></span>
-          </div>
+    <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 100px; width: 100%;\\">
+      <div class=\\"cdk-virtual-scroll-filler-horizontal\\"></div>
+      <div class=\\"cdk-virtual-scroll-filler-vertical\\" style=\\"height: 308px; width: 0px;\\"></div>
+      <div class=\\"cdk-virtual-scroll-content\\" style=\\"margin-top: 0px;\\">
+        <div class=\\"ix-tree-node ix-tree-node-expanded\\" aria-label=\\"Node 0\\" aria-selected=\\"false\\" title=\\"Node 0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"></span>
+          <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
+            <!---->
+            <!---->
+            <!---->
+          </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0</span>
+          <!----></span>
+        </div>
+        <div class=\\"ix-tree-node ix-tree-node-expanded\\" aria-label=\\"Node 0-0\\" aria-selected=\\"false\\" title=\\"Node 0-0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span></span>
+          <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span><label class=\\"ix-checkbox ix-checkbox-checked ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"true\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
+            <!---->
+            <!---->
+            <!---->
+          </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0</span>
+          <!----></span>
+        </div>
+        <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-0-0\\" aria-selected=\\"false\\" title=\\"Node 0-0-0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span><span class=\\"ix-tree-node-indent-unit\\"></span></span>
+          <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
+            <!---->
+            <!---->
+            <!---->
+          </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0-0</span>
+          <!----></span>
+        </div>
+        <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-0-1\\" aria-selected=\\"false\\" title=\\"Node 0-0-1\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span><span class=\\"ix-tree-node-indent-unit\\"></span></span>
+          <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
+            <!---->
+            <!---->
+            <!---->
+          </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0-1</span>
+          <!----></span>
         </div>
       </div>
     </div>
diff --git a/packages/components/tree/src/Tree.tsx b/packages/components/tree/src/Tree.tsx
index 84ffc4e6a..a62dd5570 100644
--- a/packages/components/tree/src/Tree.tsx
+++ b/packages/components/tree/src/Tree.tsx
@@ -11,7 +11,7 @@ import { isNil } from 'lodash-es'
 
 import {
   CdkVirtualScroll,
-  type VirtualItemRenderFn,
+  type VirtualRowRenderFn,
   type VirtualScrollInstance,
   type VirtualScrollToOptions,
 } from '@idux/cdk/scroll'
@@ -183,7 +183,7 @@ export default defineComponent({
 
       let children: VNodeTypes
       if (nodes.length > 0) {
-        const itemRender: VirtualItemRenderFn<MergedNode> = ({ item }) => <TreeNode node={item} {...item}></TreeNode>
+        const rowRender: VirtualRowRenderFn<MergedNode> = ({ item }) => <TreeNode node={item} {...item}></TreeNode>
         const { height, virtual, virtualItemHeight, onScroll, onScrolledBottom } = props
         children = virtual ? (
           <CdkVirtualScroll
@@ -192,8 +192,8 @@ export default defineComponent({
             dataSource={nodes}
             getKey="key"
             height={autoHeight.value ? '100%' : height}
-            itemHeight={virtualItemHeight}
-            itemRender={itemRender}
+            rowHeight={virtualItemHeight}
+            rowRender={rowRender}
             virtual
             onScroll={onScroll}
             onScrolledBottom={onScrolledBottom}
diff --git a/packages/components/tree/src/node/TreeNode.tsx b/packages/components/tree/src/node/TreeNode.tsx
index 1b44640a4..d31f5ecc9 100644
--- a/packages/components/tree/src/node/TreeNode.tsx
+++ b/packages/components/tree/src/node/TreeNode.tsx
@@ -10,7 +10,6 @@ import type { VKey } from '@idux/cdk/utils'
 
 import { computed, defineComponent, inject } from 'vue'
 
-import { useKey } from '@idux/cdk/utils'
 import { IxIcon } from '@idux/components/icon'
 
 import Checkbox from './Checkbox'
@@ -46,17 +45,17 @@ export default defineComponent({
       handleDrop,
     } = inject(treeToken)!
 
-    const key = useKey()
+    const nodeKey = computed(() => props.node.key)
 
-    const isActive = computed(() => activeKey.value === key)
+    const isActive = computed(() => activeKey.value === nodeKey.value)
     const isLast = computed(() => mergedShowLine.value && props.isLast)
     const hasTopLine = computed(() => mergedShowLine.value && !props.isLeaf && props.level !== 0 && props.isFirst)
-    const selected = computed(() => selectedKeys.value.includes(key))
+    const selected = computed(() => selectedKeys.value.includes(nodeKey.value))
     const disabled = computed(() => props.selectDisabled || !treeProps.selectable)
 
-    const dragging = computed(() => dragKey.value === key)
-    const dropping = computed(() => dropKey.value === key)
-    const dropParent = computed(() => dropParentKey.value === key)
+    const dragging = computed(() => dragKey.value === nodeKey.value)
+    const dropping = computed(() => dropKey.value === nodeKey.value)
+    const dropParent = computed(() => dropParentKey.value === nodeKey.value)
     const dropBefore = computed(() => dropping.value && dropType.value === 'before')
     const dropInside = computed(() => dropping.value && dropType.value === 'inside')
     const dropAfter = computed(() => dropping.value && dropType.value === 'after')
@@ -126,7 +125,7 @@ export default defineComponent({
       const { checkable, draggable } = treeProps
       const mergedDraggable = draggable && !dragDisabled
       const draggableIconNode = slots.draggableIcon?.() ?? <IxIcon name={draggableIcon.value} />
-      const currNode = nodeMap.get(key)
+      const currNode = nodeMap.get(nodeKey.value)
       const noopIdentUnitArr: number[] = []
       if (mergedShowLine.value) {
         getParentKeys(nodeMap, currNode)
@@ -167,10 +166,22 @@ export default defineComponent({
           {isLeaf && mergedShowLine.value ? (
             <LeafLine />
           ) : (
-            <Expand expanded={expanded} hasTopLine={hasTopLine.value} isLeaf={isLeaf} nodeKey={key} rawNode={rawNode} />
+            <Expand
+              expanded={expanded}
+              hasTopLine={hasTopLine.value}
+              isLeaf={isLeaf}
+              nodeKey={nodeKey.value}
+              rawNode={rawNode}
+            />
           )}
           {checkable && <Checkbox checkDisabled={checkDisabled} node={node} />}
-          <Content disabled={disabled.value} node={node} nodeKey={key} label={label} selected={selected.value} />
+          <Content
+            disabled={disabled.value}
+            node={node}
+            nodeKey={nodeKey.value}
+            label={label}
+            selected={selected.value}
+          />
         </div>
       )
     }
diff --git a/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap b/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap
index 0e6ac30f2..239120991 100644
--- a/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap
+++ b/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap
@@ -54,7 +54,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                 style="overflow: hidden;"
               >
                 <table
-                  style="table-layout: fixed; visibility: hidden;"
+                  style="table-layout: fixed;"
                 >
                   <colgroup>
                     
@@ -66,7 +66,6 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     <col />
                     
                   </colgroup>
-                  
                   <thead
                     class="ix-table-thead"
                   >
@@ -75,6 +74,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                       class="ix-table-row"
                     >
                       
+                      
                       <th
                         class="ix-table-cell ix-table-cell-selectable"
                       >
@@ -127,10 +127,10 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         Address
                       </th>
                       
+                      
                     </tr>
                     
                   </thead>
-                  
                 </table>
               </div>
               <div
@@ -154,6 +154,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                   <tbody
                     class="ix-table-tbody"
                   >
+                    
                     <tr
                       aria-hidden="true"
                       class="ix-table-measure-row"
@@ -204,6 +205,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -251,12 +253,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -304,12 +308,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: not-allowed;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -358,12 +364,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -411,12 +419,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -464,12 +474,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -517,12 +529,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -570,12 +584,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -623,12 +639,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: not-allowed;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -677,12 +695,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -730,12 +750,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -783,12 +805,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -836,12 +860,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: not-allowed;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -890,12 +916,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -943,12 +971,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -996,12 +1026,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -1049,8 +1081,10 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         <!---->
                       </td>
                       
+                      
                     </tr>
                     
+                    
                   </tbody>
                   <!---->
                 </table>
@@ -1167,7 +1201,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                 style="overflow: hidden;"
               >
                 <table
-                  style="table-layout: fixed; visibility: hidden;"
+                  style="table-layout: fixed;"
                 >
                   <colgroup>
                     
@@ -1177,7 +1211,6 @@ exports[`ProTransfer > table transfer render work 1`] = `
                     <col />
                     
                   </colgroup>
-                  
                   <thead
                     class="ix-table-thead"
                   >
@@ -1186,6 +1219,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                       class="ix-table-row"
                     >
                       
+                      
                       <th
                         class="ix-table-cell ix-table-cell-selectable"
                       >
@@ -1228,10 +1262,10 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         Name
                       </th>
                       
+                      
                     </tr>
                     
                   </thead>
-                  
                 </table>
               </div>
               <div
@@ -1253,6 +1287,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                   <tbody
                     class="ix-table-tbody"
                   >
+                    
                     <tr
                       aria-hidden="true"
                       class="ix-table-measure-row"
@@ -1285,6 +1320,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -1322,12 +1358,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         Option0
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: not-allowed;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -1366,12 +1404,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         Option1
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -1409,12 +1449,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         Option2
                       </td>
                       
+                      
                     </tr>
                     <tr
                       class="ix-table-row"
                       style="cursor: pointer;"
                     >
                       
+                      
                       <td
                         class="ix-table-cell"
                       >
@@ -1452,8 +1494,10 @@ exports[`ProTransfer > table transfer render work 1`] = `
                         Option3
                       </td>
                       
+                      
                     </tr>
                     
+                    
                   </tbody>
                   <!---->
                 </table>
diff --git a/packages/site/src/docs/GettingStarted.zh.md b/packages/site/src/docs/GettingStarted.zh.md
old mode 100755
new mode 100644
diff --git a/packages/site/src/docs/I18n.zh.md b/packages/site/src/docs/I18n.zh.md
old mode 100755
new mode 100644