diff --git a/packages/nutui-taro-demo/src/layout/pages/grid/basic.vue b/packages/nutui-taro-demo/src/layout/pages/grid/basic.vue
new file mode 100644
index 0000000000..424c207c98
--- /dev/null
+++ b/packages/nutui-taro-demo/src/layout/pages/grid/basic.vue
@@ -0,0 +1,15 @@
+<template>
+  <nut-grid>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+  </nut-grid>
+</template>
+<script setup lang="ts">
+import { Dongdong } from '@nutui/icons-vue';
+</script>
diff --git a/packages/nutui-taro-demo/src/layout/pages/grid/column.vue b/packages/nutui-taro-demo/src/layout/pages/grid/column.vue
new file mode 100644
index 0000000000..9eb622a16b
--- /dev/null
+++ b/packages/nutui-taro-demo/src/layout/pages/grid/column.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-grid :column-num="3">
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+  </nut-grid>
+</template>
+<script setup lang="ts">
+import { Dongdong } from '@nutui/icons-vue';
+</script>
diff --git a/packages/nutui-taro-demo/src/layout/pages/grid/content.vue b/packages/nutui-taro-demo/src/layout/pages/grid/content.vue
new file mode 100644
index 0000000000..01317bcc05
--- /dev/null
+++ b/packages/nutui-taro-demo/src/layout/pages/grid/content.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-grid :border="false">
+    <nut-grid-item v-for="i in 4" :key="i">
+      <nut-avatar size="large">
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
+      </nut-avatar>
+    </nut-grid-item>
+  </nut-grid>
+</template>
diff --git a/packages/nutui-taro-demo/src/layout/pages/grid/gutter.vue b/packages/nutui-taro-demo/src/layout/pages/grid/gutter.vue
new file mode 100644
index 0000000000..0453e29c15
--- /dev/null
+++ b/packages/nutui-taro-demo/src/layout/pages/grid/gutter.vue
@@ -0,0 +1,15 @@
+<template>
+  <nut-grid :gutter="10">
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+  </nut-grid>
+</template>
+<script setup lang="ts">
+import { Dongdong } from '@nutui/icons-vue';
+</script>
diff --git a/packages/nutui-taro-demo/src/layout/pages/grid/horizontal.vue b/packages/nutui-taro-demo/src/layout/pages/grid/horizontal.vue
new file mode 100644
index 0000000000..fba24c2425
--- /dev/null
+++ b/packages/nutui-taro-demo/src/layout/pages/grid/horizontal.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-grid direction="horizontal">
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+  </nut-grid>
+</template>
+<script setup lang="ts">
+import { Dongdong } from '@nutui/icons-vue';
+</script>
diff --git a/packages/nutui-taro-demo/src/layout/pages/grid/index.vue b/packages/nutui-taro-demo/src/layout/pages/grid/index.vue
index 678f9200b0..e10db41b06 100644
--- a/packages/nutui-taro-demo/src/layout/pages/grid/index.vue
+++ b/packages/nutui-taro-demo/src/layout/pages/grid/index.vue
@@ -1,86 +1,58 @@
 <template>
   <Demo class="full">
-    <h2>基础用法</h2>
-    <nut-grid>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    </nut-grid>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>自定义列数</h2>
-    <nut-grid :column-num="3">
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    </nut-grid>
+    <h2>{{ t('column') }}</h2>
+    <Column />
 
-    <h2>正方形格子</h2>
-    <nut-grid :column-num="3" square>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    </nut-grid>
+    <h2>{{ t('square') }}</h2>
+    <Sqaure />
 
-    <h2>格子间距</h2>
-    <nut-grid :gutter="10">
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    </nut-grid>
+    <h2>{{ t('gutter') }}</h2>
+    <Gutter />
 
-    <h2>内容翻转</h2>
-    <nut-grid reverse>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    </nut-grid>
+    <h2>{{ t('reverse') }}</h2>
+    <Reverse />
 
-    <h2>内容横向</h2>
-    <nut-grid direction="horizontal">
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    </nut-grid>
+    <h2>{{ t('horizontal') }}</h2>
+    <Horizontal />
 
-    <h2>图标颜色/大小</h2>
-    <nut-grid :column-num="3">
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-      <nut-grid-item text="文字">
-        <Dongdong size="40px" color="#478EF2" />
-      </nut-grid-item>
-      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    </nut-grid>
-
-    <!-- <h2>页面导航</h2>
-    <nut-grid :column-num="2">
-      <nut-grid-item icon="home" text="路由跳转 ’/‘ " to="/"></nut-grid-item>
-      <nut-grid-item icon="search" text="URL 跳转" url="https://jd.com"></nut-grid-item>
-    </nut-grid> -->
-
-    <h2>自定义内容</h2>
-    <nut-grid :border="false">
-      <nut-grid-item v-for="i in 4" :key="i">
-        <nut-avatar size="large">
-          <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-          />
-        </nut-avatar>
-      </nut-grid-item>
-    </nut-grid>
+    <h2>{{ t('content') }}</h2>
+    <Content />
   </Demo>
 </template>
+
 <script setup lang="ts">
-import { Dongdong } from '@nutui/icons-vue-taro';
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Column from './column.vue';
+import Sqaure from './square.vue';
+import Gutter from './gutter.vue';
+import Reverse from './reverse.vue';
+import Horizontal from './horizontal.vue';
+import Content from './content.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    text: '文字',
+    column: '自定义列数',
+    square: '正方形格子',
+    gutter: '格子间距',
+    reverse: '内容翻转',
+    horizontal: '内容横向',
+    content: '自定义内容'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    text: 'text',
+    column: 'Column Num',
+    square: 'Square',
+    gutter: 'Gutter',
+    reverse: 'Reverse',
+    horizontal: 'Horizontal',
+    content: 'Custom Content'
+  }
+});
 </script>
diff --git a/packages/nutui-taro-demo/src/layout/pages/grid/reverse.vue b/packages/nutui-taro-demo/src/layout/pages/grid/reverse.vue
new file mode 100644
index 0000000000..8fc9f706e7
--- /dev/null
+++ b/packages/nutui-taro-demo/src/layout/pages/grid/reverse.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-grid reverse>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+  </nut-grid>
+</template>
+<script setup lang="ts">
+import { Dongdong } from '@nutui/icons-vue';
+</script>
diff --git a/packages/nutui-taro-demo/src/layout/pages/grid/square.vue b/packages/nutui-taro-demo/src/layout/pages/grid/square.vue
new file mode 100644
index 0000000000..25c014182f
--- /dev/null
+++ b/packages/nutui-taro-demo/src/layout/pages/grid/square.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-grid :column-num="3" square>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+  </nut-grid>
+</template>
+<script setup lang="ts">
+import { Dongdong } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/grid/demo.vue b/src/packages/__VUE/grid/demo.vue
deleted file mode 100644
index e23c19e369..0000000000
--- a/src/packages/__VUE/grid/demo.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-  <div class="demo full">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-grid>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-    </nut-grid>
-
-    <h2>{{ translate('columnNum') }}</h2>
-    <nut-grid :column-num="3">
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-    </nut-grid>
-
-    <h2>{{ translate('square') }}</h2>
-    <nut-grid :column-num="3" square>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-    </nut-grid>
-
-    <h2>{{ translate('gutter') }}</h2>
-    <nut-grid :gutter="10">
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-    </nut-grid>
-
-    <h2>{{ translate('reverse') }}</h2>
-    <nut-grid reverse>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-    </nut-grid>
-
-    <h2>{{ translate('Horizontal') }}</h2>
-    <nut-grid direction="horizontal">
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-    </nut-grid>
-
-    <h2>{{ translate('iconStyle') }}</h2>
-    <nut-grid :column-num="3">
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong height="40px" width="40px" color="#478EF2" />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('text')">
-        <Dongdong />
-      </nut-grid-item>
-    </nut-grid>
-
-    <h2>{{ translate('route') }}</h2>
-    <nut-grid :column-num="2">
-      <nut-grid-item :text="translate('vueRouter')" to="/">
-        <Home />
-      </nut-grid-item>
-      <nut-grid-item :text="translate('url')" url="https://jd.com">
-        <Search />
-      </nut-grid-item>
-    </nut-grid>
-
-    <h2>{{ translate('customContent') }}</h2>
-    <nut-grid :border="false">
-      <nut-grid-item v-for="i in 4" :key="i">
-        <nut-avatar size="large">
-          <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-          />
-        </nut-avatar>
-      </nut-grid-item>
-    </nut-grid>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Dongdong, Home, Search } from '@nutui/icons-vue';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    text: '文字',
-    columnNum: '自定义列数',
-    square: '正方形格子',
-    gutter: '格子间距',
-    reverse: '内容翻转',
-    Horizontal: '内容横向',
-    iconStyle: '图标颜色/大小',
-    route: '页面导航',
-    customContent: '自定义内容',
-    vueRouter: '路由跳转',
-    url: '链接跳转'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    text: 'text',
-    columnNum: 'Column Num',
-    square: 'Square',
-    gutter: 'Gutter',
-    reverse: 'Reverse',
-    Horizontal: 'Horizontal',
-    iconStyle: 'Icon Style',
-    route: 'Route',
-    customContent: 'Custom Content',
-    vueRouter: 'Vue Router',
-    url: 'URL'
-  }
-});
-</script>
diff --git a/src/packages/__VUE/grid/demo/basic.vue b/src/packages/__VUE/grid/demo/basic.vue
new file mode 100644
index 0000000000..424c207c98
--- /dev/null
+++ b/src/packages/__VUE/grid/demo/basic.vue
@@ -0,0 +1,15 @@
+<template>
+  <nut-grid>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+  </nut-grid>
+</template>
+<script setup lang="ts">
+import { Dongdong } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/grid/demo/column.vue b/src/packages/__VUE/grid/demo/column.vue
new file mode 100644
index 0000000000..9eb622a16b
--- /dev/null
+++ b/src/packages/__VUE/grid/demo/column.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-grid :column-num="3">
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+  </nut-grid>
+</template>
+<script setup lang="ts">
+import { Dongdong } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/grid/demo/content.vue b/src/packages/__VUE/grid/demo/content.vue
new file mode 100644
index 0000000000..01317bcc05
--- /dev/null
+++ b/src/packages/__VUE/grid/demo/content.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-grid :border="false">
+    <nut-grid-item v-for="i in 4" :key="i">
+      <nut-avatar size="large">
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
+      </nut-avatar>
+    </nut-grid-item>
+  </nut-grid>
+</template>
diff --git a/src/packages/__VUE/grid/demo/gutter.vue b/src/packages/__VUE/grid/demo/gutter.vue
new file mode 100644
index 0000000000..0453e29c15
--- /dev/null
+++ b/src/packages/__VUE/grid/demo/gutter.vue
@@ -0,0 +1,15 @@
+<template>
+  <nut-grid :gutter="10">
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+  </nut-grid>
+</template>
+<script setup lang="ts">
+import { Dongdong } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/grid/demo/horizontal.vue b/src/packages/__VUE/grid/demo/horizontal.vue
new file mode 100644
index 0000000000..fba24c2425
--- /dev/null
+++ b/src/packages/__VUE/grid/demo/horizontal.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-grid direction="horizontal">
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+  </nut-grid>
+</template>
+<script setup lang="ts">
+import { Dongdong } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/grid/demo/index.vue b/src/packages/__VUE/grid/demo/index.vue
new file mode 100644
index 0000000000..57c30c2c6e
--- /dev/null
+++ b/src/packages/__VUE/grid/demo/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <Demo class="full">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('column') }}</h2>
+    <Column />
+
+    <h2>{{ t('square') }}</h2>
+    <Sqaure />
+
+    <h2>{{ t('gutter') }}</h2>
+    <Gutter />
+
+    <h2>{{ t('reverse') }}</h2>
+    <Reverse />
+
+    <h2>{{ t('horizontal') }}</h2>
+    <Horizontal />
+
+    <h2>{{ t('content') }}</h2>
+    <Content />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Column from './column.vue';
+import Sqaure from './square.vue';
+import Gutter from './gutter.vue';
+import Reverse from './reverse.vue';
+import Horizontal from './horizontal.vue';
+import Content from './content.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    text: '文字',
+    column: '自定义列数',
+    square: '正方形格子',
+    gutter: '格子间距',
+    reverse: '内容翻转',
+    horizontal: '内容横向',
+    content: '自定义内容'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    text: 'text',
+    column: 'Column Num',
+    square: 'Square',
+    gutter: 'Gutter',
+    reverse: 'Reverse',
+    horizontal: 'Horizontal',
+    content: 'Custom Content'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/grid/demo/reverse.vue b/src/packages/__VUE/grid/demo/reverse.vue
new file mode 100644
index 0000000000..8fc9f706e7
--- /dev/null
+++ b/src/packages/__VUE/grid/demo/reverse.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-grid reverse>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+  </nut-grid>
+</template>
+<script setup lang="ts">
+import { Dongdong } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/grid/demo/square.vue b/src/packages/__VUE/grid/demo/square.vue
new file mode 100644
index 0000000000..25c014182f
--- /dev/null
+++ b/src/packages/__VUE/grid/demo/square.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-grid :column-num="3" square>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+  </nut-grid>
+</template>
+<script setup lang="ts">
+import { Dongdong } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/grid/doc.en-US.md b/src/packages/__VUE/grid/doc.en-US.md
index 82f508774f..ba11fddeee 100644
--- a/src/packages/__VUE/grid/doc.en-US.md
+++ b/src/packages/__VUE/grid/doc.en-US.md
@@ -17,228 +17,64 @@ app.use(GridItem);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-grid>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: grid basic
 
 ### Column Num
 
-:::demo
-
-```vue
-<template>
-  <nut-grid :column-num="3">
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: grid column
 
 ### Square
 
-:::demo
-
-```vue
-<template>
-  <nut-grid :column-num="3" square>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: grid square
 
 ### Gutter
 
-:::demo
-
-```vue
-<template>
-  <nut-grid :gutter="10">
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: grid gutter
 
 ### Reverse
 
-:::demo
-
-```vue
-<template>
-  <nut-grid reverse>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: grid reverse
 
 ### Horizontal
 
-:::demo
-
-```vue
-<template>
-  <nut-grid direction="horizontal">
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
-
-### Icon Style
-
-:::demo
-
-```vue
-<template>
-  <nut-grid :column-num="3">
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="text">
-      <Dongdong height="40px" width="40px" color="#478EF2" />
-    </nut-grid-item>
-    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
-
-### Route
-
-:::demo
-
-```vue
-<template>
-  <nut-grid :column-num="2">
-    <nut-grid-item text="Vue Router" to="/">
-      <Home />
-    </nut-grid-item>
-    <nut-grid-item text="URL" url="https://jd.com">
-      <Search />
-    </nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Home, Search } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: grid horizontal
 
 ### Custom Content
 
-:::demo
-
-```vue
-<template>
-  <nut-grid :border="false">
-    <nut-grid-item v-for="i in 4" :key="i">
-      <nut-avatar size="large">
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-        />
-      </nut-avatar>
-    </nut-grid-item>
-  </nut-grid>
-</template>
-```
-
-:::
+> demo: grid content
 
 ## API
 
 ### Grid Props
 
-| Attribute  | Description                                               | Type             | 默认值     |
-| ---------- | --------------------------------------------------------- | ---------------- | ---------- |
-| column-num | Column Num                                                | number \| string | `4`        |
-| border     | Whether to show border                                    | boolean          | `true`     |
-| gutter     | Gutter,The default unit is `px`                           | number \| string | `0`        |
-| center     | Whether to center content                                 | boolean          | `true`     |
-| square     | Whether to be square shape                                | boolean          | `false`    |
-| reverse    | Whether to reverse the position of icon and text          | boolean          | `false`    |
-| direction  | Content arrangement direction, can be set to `horizontal` | string           | `vertical` |
-| clickable  | Whether to show click feedback when clicked               | boolean          | `false`    |
+| Attribute | Description | Type | 默认值 |
+| --- | --- | --- | --- |
+| column-num | Column Num | number \| string | `4` |
+| border | Whether to show border | boolean | `true` |
+| gutter | Gutter,The default unit is `px` | number \| string | `0` |
+| center | Whether to center content | boolean | `true` |
+| square | Whether to be square shape | boolean | `false` |
+| reverse | Whether to reverse the position of icon and text | boolean | `false` |
+| direction | Content arrangement direction, can be set to `horizontal` | string | `vertical` |
+| clickable | Whether to show click feedback when clicked | boolean | `false` |
 
 ### GridItem Props
 
-| Attribute | Description                                                                               | Type             | Default |
-| --------- | ----------------------------------------------------------------------------------------- | ---------------- | ------- |
-| text      | text                                                                                      | string           | -       |
-| url       | Link URL                                                                                  | string           | `''`    |
-| to        | Target route of the link, same as [to](https://router.vuejs.org/zh/api/#to) of vue-router | string \| object | -       |
-| replace   | If true, the navigation will not leave a history record                                   | boolean          | `false` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| text | text | string | - |
 
 ### GridItem Slots
 
-| Name    | Description    |
-| ------- | -------------- |
+| Name | Description |
+| --- | --- |
 | default | Custom content |
-| text    | Custom text    |
+| text | Custom text |
 
 ### GridItem Events
 
-| Event | Description                       | Arguments    |
-| ----- | --------------------------------- | ------------ |
+| Event | Description | Arguments |
+| --- | --- | --- |
 | click | Emitted when component is clicked | event: Event |
 
 ## Theming
@@ -247,11 +83,11 @@ import { Home, Search } from '@nutui/icons-vue';
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                             | Default Value             |
-| -------------------------------- | ------------------------- |
-| --nut-grid-border-color          | _#f5f6f7_                 |
-| --nut-grid-item-content-padding  | _16px 8px_                |
-| --nut-grid-item-content-bg-color | _var(--nut-white)_        |
-| --nut-grid-item-text-margin      | _8px_                     |
-| --nut-grid-item-text-color       | _var(--nut-title-color2)_ |
-| --nut-grid-item-text-font-size   | _var(--nut-font-size-1)_  |
+| Name | Default Value |
+| --- | --- |
+| --nut-grid-border-color | _#f5f6f7_ |
+| --nut-grid-item-content-padding | _16px 8px_ |
+| --nut-grid-item-content-bg-color | _var(--nut-white)_ |
+| --nut-grid-item-text-margin | _8px_ |
+| --nut-grid-item-text-color | _var(--nut-title-color2)_ |
+| --nut-grid-item-text-font-size | _var(--nut-font-size-1)_ |
diff --git a/src/packages/__VUE/grid/doc.md b/src/packages/__VUE/grid/doc.md
index 65555a9c49..4b47a31c97 100644
--- a/src/packages/__VUE/grid/doc.md
+++ b/src/packages/__VUE/grid/doc.md
@@ -17,229 +17,65 @@ app.use(GridItem);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-grid>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: grid basic
 
 ### 自定义列数
 
-:::demo
-
-```vue
-<template>
-  <nut-grid :column-num="3">
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: grid column
 
 ### 正方形格子
 
-:::demo
-
-```vue
-<template>
-  <nut-grid :column-num="3" square>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: grid square
 
 ### 格子间距
 
-:::demo
-
-```vue
-<template>
-  <nut-grid :gutter="10">
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: grid gutter
 
 ### 内容翻转
 
-:::demo
-
-```vue
-<template>
-  <nut-grid reverse>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: grid reverse
 
 ### 内容横向
 
-:::demo
-
-```vue
-<template>
-  <nut-grid direction="horizontal">
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
-
-### 图标颜色/大小
-
-:::demo
-
-```vue
-<template>
-  <nut-grid :column-num="3">
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字">
-      <Dongdong height="40px" width="40px" color="#478EF2" />
-    </nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue';
-</script>
-```
-
-:::
-
-### 页面导航
-
-:::demo
-
-```vue
-<template>
-  <nut-grid :column-num="2">
-    <nut-grid-item text="路由跳转" to="/">
-      <Home />
-    </nut-grid-item>
-    <nut-grid-item text="链接跳转" url="https://jd.com">
-      <Search />
-    </nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Home, Search } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: grid horizontal
 
 ### 自定义内容
 
-:::demo
-
-```vue
-<template>
-  <nut-grid :border="false">
-    <nut-grid-item v-for="i in 4" :key="i">
-      <nut-avatar size="large">
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-        />
-      </nut-avatar>
-    </nut-grid-item>
-  </nut-grid>
-</template>
-```
-
-:::
+> demo: grid content
 
 ## API
 
 ### Grid Props
 
-| 参数       | 说明                                      | 类型             | 默认值     |
-| ---------- | ----------------------------------------- | ---------------- | ---------- |
-| column-num | 列数                                      | number \| string | `4`        |
-| border     | 是否显示边框                              | boolean          | `true`     |
-| gutter     | 格子之间的间距，默认单位为 `px`           | number \| string | `0`        |
-| center     | 是否将格子内容居中显示                    | boolean          | `true`     |
-| square     | 是否将格子固定为正方形                    | boolean          | `false`    |
-| reverse    | 内容翻转                                  | boolean          | `false`    |
-| direction  | 格子内容排列的方向，可选值为 `horizontal` | string           | `vertical` |
-| clickable  | 是否开启格子点击反馈                      | boolean          | `false`    |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| column-num | 列数 | number \| string | `4` |
+| border | 是否显示边框 | boolean | `true` |
+| gutter | 格子之间的间距，默认单位为 `px` | number \| string | `0` |
+| center | 是否将格子内容居中显示 | boolean | `true` |
+| square | 是否将格子固定为正方形 | boolean | `false` |
+| reverse | 内容翻转 | boolean | `false` |
+| direction | 格子内容排列的方向，可选值为 `horizontal` | string | `vertical` |
+| clickable | 是否开启格子点击反馈 | boolean | `false` |
 
 ### GridItem Props
 
-| 参数    | 说明                                                                                           | 类型             | 默认值  |
-| ------- | ---------------------------------------------------------------------------------------------- | ---------------- | ------- |
-| text    | 文字                                                                                           | string           | -       |
-| url     | 点击后跳转的链接地址                                                                           | string           | `''`    |
-| to      | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | string \| object | -       |
-| replace | 是否在跳转时替换当前页面历史                                                                   | boolean          | `false` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| text | 文字 | string | - |
 
 ### GridItem Slots
 
-| 名称    | 说明           |
-| ------- | -------------- |
+| 名称 | 说明 |
+| --- | --- |
 | default | 自定义所有内容 |
-| text    | 自定义文字     |
+| text | 自定义文字 |
 
 ### GridItem Events
 
-| 事件名 | 说明           | 回调参数     |
-| ------ | -------------- | ------------ |
-| click  | 点击格子时触发 | event: Event |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click | 点击格子时触发 | event: Event |
 
 ## 主题定制
 
@@ -247,11 +83,11 @@ import { Home, Search } from '@nutui/icons-vue';
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                             | 默认值                    |
-| -------------------------------- | ------------------------- |
-| --nut-grid-border-color          | _#f5f6f7_                 |
-| --nut-grid-item-content-padding  | _16px 8px_                |
-| --nut-grid-item-content-bg-color | _var(--nut-white)_        |
-| --nut-grid-item-text-margin      | _8px_                     |
-| --nut-grid-item-text-color       | _var(--nut-title-color2)_ |
-| --nut-grid-item-text-font-size   | _var(--nut-font-size-1)_  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-grid-border-color | _#f5f6f7_ |
+| --nut-grid-item-content-padding | _16px 8px_ |
+| --nut-grid-item-content-bg-color | _var(--nut-white)_ |
+| --nut-grid-item-text-margin | _8px_ |
+| --nut-grid-item-text-color | _var(--nut-title-color2)_ |
+| --nut-grid-item-text-font-size | _var(--nut-font-size-1)_ |
diff --git a/src/packages/__VUE/grid/doc.taro.md b/src/packages/__VUE/grid/doc.taro.md
index fb46557dee..c9fafb4e61 100644
--- a/src/packages/__VUE/grid/doc.taro.md
+++ b/src/packages/__VUE/grid/doc.taro.md
@@ -17,204 +17,65 @@ app.use(GridItem);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-grid>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue-taro';
-</script>
-```
-
-:::
+> demo: grid basic
 
 ### 自定义列数
 
-:::demo
-
-```vue
-<template>
-  <nut-grid :column-num="3">
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue-taro';
-</script>
-```
-
-:::
+> demo: grid column
 
 ### 正方形格子
 
-:::demo
-
-```vue
-<template>
-  <nut-grid :column-num="3" square>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue-taro';
-</script>
-```
-
-:::
+> demo: grid square
 
 ### 格子间距
 
-:::demo
-
-```vue
-<template>
-  <nut-grid :gutter="10">
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue-taro';
-</script>
-```
-
-:::
+> demo: grid gutter
 
 ### 内容翻转
 
-:::demo
-
-```vue
-<template>
-  <nut-grid reverse>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue-taro';
-</script>
-```
-
-:::
+> demo: grid reverse
 
 ### 内容横向
 
-:::demo
-
-```vue
-<template>
-  <nut-grid direction="horizontal">
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue-taro';
-</script>
-```
-
-:::
-
-### 图标颜色/大小
-
-:::demo
-
-```vue
-<template>
-  <nut-grid :column-num="3">
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-    <nut-grid-item text="文字">
-      <Dongdong size="40px" color="#478EF2" />
-    </nut-grid-item>
-    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { Dongdong } from '@nutui/icons-vue-taro';
-</script>
-```
-
-:::
+> demo: grid horizontal
 
 ### 自定义内容
 
-:::demo
-
-```vue
-<template>
-  <nut-grid :border="false">
-    <nut-grid-item v-for="i in 4" :key="i">
-      <nut-avatar size="large">
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-        />
-      </nut-avatar>
-    </nut-grid-item>
-  </nut-grid>
-</template>
-```
-
-:::
+> demo: grid content
 
 ## API
 
 ### Grid Props
 
-| 参数       | 说明                                      | 类型             | 默认值     |
-| ---------- | ----------------------------------------- | ---------------- | ---------- |
-| column-num | 列数                                      | number \| string | `4`        |
-| border     | 是否显示边框                              | boolean          | `true`     |
-| gutter     | 格子之间的间距，默认单位为 `px`           | number \| string | `0`        |
-| center     | 是否将格子内容居中显示                    | boolean          | `true`     |
-| square     | 是否将格子固定为正方形                    | boolean          | `false`    |
-| reverse    | 内容翻转                                  | boolean          | `false`    |
-| direction  | 格子内容排列的方向，可选值为 `horizontal` | string           | `vertical` |
-| clickable  | 是否开启格子点击反馈                      | boolean          | `false`    |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| column-num | 列数 | number \| string | `4` |
+| border | 是否显示边框 | boolean | `true` |
+| gutter | 格子之间的间距，默认单位为 `px` | number \| string | `0` |
+| center | 是否将格子内容居中显示 | boolean | `true` |
+| square | 是否将格子固定为正方形 | boolean | `false` |
+| reverse | 内容翻转 | boolean | `false` |
+| direction | 格子内容排列的方向，可选值为 `horizontal` | string | `vertical` |
+| clickable | 是否开启格子点击反馈 | boolean | `false` |
 
 ### GridItem Props
 
-| 参数 | 说明 | 类型   | 默认值 |
-| ---- | ---- | ------ | ------ |
-| text | 文字 | string | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| text | 文字 | string | - |
 
 ### GridItem Slots
 
-| 名称    | 说明           |
-| ------- | -------------- |
+| 名称 | 说明 |
+| --- | --- |
 | default | 自定义所有内容 |
-| text    | 自定义文字     |
+| text | 自定义文字 |
 
 ### GridItem Events
 
-| 事件名 | 说明           | 回调参数     |
-| ------ | -------------- | ------------ |
-| click  | 点击格子时触发 | event: Event |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click | 点击格子时触发 | event: Event |
 
 ## 主题定制
 
@@ -222,11 +83,11 @@ import { Dongdong } from '@nutui/icons-vue-taro';
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                             | 默认值                    |
-| -------------------------------- | ------------------------- |
-| --nut-grid-border-color          | _#f5f6f7_                 |
-| --nut-grid-item-content-padding  | _16px 8px_                |
-| --nut-grid-item-content-bg-color | _var(--nut-white)_        |
-| --nut-grid-item-text-margin      | _8px_                     |
-| --nut-grid-item-text-color       | _var(--nut-title-color2)_ |
-| --nut-grid-item-text-font-size   | _var(--nut-font-size-1)_  |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-grid-border-color | _#f5f6f7_ |
+| --nut-grid-item-content-padding | _16px 8px_ |
+| --nut-grid-item-content-bg-color | _var(--nut-white)_ |
+| --nut-grid-item-text-margin | _8px_ |
+| --nut-grid-item-text-color | _var(--nut-title-color2)_ |
+| --nut-grid-item-text-font-size | _var(--nut-font-size-1)_ |