diff --git a/src/grid/grid-item.tsx b/src/grid/grid-item.tsx
new file mode 100644
index 000000000..8611122bf
--- /dev/null
+++ b/src/grid/grid-item.tsx
@@ -0,0 +1,77 @@
+import { defineComponent, getCurrentInstance, computed, inject } from 'vue';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+import isFunction from 'lodash/isFunction';
+
+import config from '../config';
+import gridItemProps from './grid-item-props';
+import { useTNodeJSX } from '../hooks/tnode';
+
+const { prefix } = config;
+const name = `${prefix}-grid-item`;
+
+export default defineComponent({
+  name,
+  props: gridItemProps,
+  setup(props, context) {
+    const internalInstance = getCurrentInstance();
+    const renderTNodeJSX = useTNodeJSX();
+    const { column, border, align, gutter } = inject<any>('grid');
+
+    const rootStyle = computed(() => {
+      const percent = column.value > 0 ? `${100 / +column.value}%` : 0;
+      const style: Record<string, any> = {
+        textAlign: ['center', 'left'].includes(align.value) ? align.value : 'center',
+      };
+      if (percent !== 0) {
+        style.flexBasis = percent;
+      }
+      return style;
+    });
+
+    const size = computed(() => {
+      if (column.value > 4 || !column.value) return 'small';
+      return column.value < 4 ? 'large' : 'middle';
+    });
+
+    const realImage = computed(() => {
+      if (isString(props.image)) return { src: props.image };
+      if (isObject(props.image) && !isFunction(props.image) && !context.slots.image) {
+        return props.image;
+      }
+      return null;
+    });
+
+    const gridItemClasses = computed(() => [
+      `${name}`,
+      `${name}--${props.layout}`,
+      { [`${name}--bordered`]: border, [`${name}--surround`]: border && gutter },
+    ]);
+
+    return () => {
+      const renderImage = () =>
+        realImage.value ? <t-image shape="round" {...realImage.value} /> : renderTNodeJSX('image');
+
+      return (
+        <div class={gridItemClasses.value} style={rootStyle.value}>
+          <div class={`${name}__image ${name}__image--${size.value}`}>
+            {props.badge ? (
+              <t-badge {...(props.badge as Object)}>
+                {realImage.value ? <t-image shape="round" {...realImage.value} /> : renderTNodeJSX('image')}
+              </t-badge>
+            ) : (
+              renderImage()
+            )}
+          </div>
+
+          <div class={`${name}__content ${name}__content--${props.layout}`}>
+            <div class={`${name}__title ${name}__title--${size.value}`}>{renderTNodeJSX('text')}</div>
+            <div class={`${name}__description ${name}__description--${props.layout}`}>
+              {renderTNodeJSX('description')}
+            </div>
+          </div>
+        </div>
+      );
+    };
+  },
+});
diff --git a/src/grid/grid-item.vue b/src/grid/grid-item.vue
deleted file mode 100644
index 9afec3dbf..000000000
--- a/src/grid/grid-item.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <div
-    :class="[
-      `${name}`,
-      `${name}--${layout}`,
-      { [`${name}--bordered`]: border, [`${name}--surround`]: border && gutter },
-    ]"
-    :style="rootStyle"
-  >
-    <div :class="[`${name}__image`, `${name}__image--${size}`]">
-      <t-badge v-if="badge" v-bind="badge">
-        <t-image v-if="realImage" shape="round" v-bind="realImage" />
-        <t-node v-else :content="imageContent" />
-      </t-badge>
-      <t-image v-else-if="realImage" shape="round" v-bind="realImage" />
-      <t-node v-else :content="imageContent" />
-    </div>
-
-    <div :class="[`${name}__content`, `${name}__content--${layout}`]">
-      <div :class="[`${name}__title`, `${name}__title--${size}`]">
-        <t-node :content="textContent" />
-      </div>
-      <div :class="[`${name}__description`, [`${name}__description--${layout}`]]">
-        <t-node :content="descContent" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, getCurrentInstance, computed, inject } from 'vue';
-import isObject from 'lodash/isObject';
-import isString from 'lodash/isString';
-import isFunction from 'lodash/isFunction';
-
-import TImage from '../image';
-import TBadge from '../badge';
-import config from '../config';
-import gridItemProps from './grid-item-props';
-import { renderTNode, TNode } from '../shared';
-
-const { prefix } = config;
-const name = `${prefix}-grid-item`;
-
-export default defineComponent({
-  name,
-  components: { TNode, TBadge, TImage },
-  props: gridItemProps,
-  setup(props, context) {
-    const internalInstance = getCurrentInstance();
-    const { column, border, align, gutter } = inject<any>('grid');
-    const imageContent = computed(() => renderTNode(internalInstance, 'image'));
-    const textContent = computed(() => renderTNode(internalInstance, 'text'));
-    const descContent = computed(() => renderTNode(internalInstance, 'description'));
-
-    const rootClass = computed(() => [`${name}`, `${name}--${props.layout}`]);
-
-    const rootStyle = computed(() => {
-      const percent = column.value > 0 ? `${100 / +column.value}%` : 0;
-      const style: Record<string, any> = {
-        textAlign: ['center', 'left'].includes(align.value) ? align.value : 'center',
-      };
-      if (percent !== 0) {
-        style.flexBasis = percent;
-      }
-      return style;
-    });
-
-    const size = computed(() => {
-      if (column.value > 4 || !column.value) return 'small';
-      return column.value < 4 ? 'large' : 'middle';
-    });
-
-    const realImage = computed(() => {
-      if (isString(props.image)) return { src: props.image };
-      if (isObject(props.image) && !isFunction(props.image) && !context.slots.image) {
-        return props.image;
-      }
-      return null;
-    });
-
-    return {
-      name,
-      size,
-      border,
-      gutter,
-      rootStyle,
-      rootClass,
-      realImage,
-      imageContent,
-      textContent,
-      descContent,
-    };
-  },
-});
-</script>
diff --git a/src/grid/grid.vue b/src/grid/grid.tsx
similarity index 71%
rename from src/grid/grid.vue
rename to src/grid/grid.tsx
index b2bd54e6f..6be3994c6 100644
--- a/src/grid/grid.vue
+++ b/src/grid/grid.tsx
@@ -1,20 +1,3 @@
-<template>
-  <div
-    :class="[
-      `${name}`,
-      {
-        [`${name}--card`]: theme === 'card',
-        [`${name}--auto-size`]: column === 0,
-        [`${name}--bordered`]: border && !gutter,
-      },
-    ]"
-    :style="rootStyle"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
 import { defineComponent, provide, toRefs, computed } from 'vue';
 
 import config from '../config';
@@ -26,7 +9,7 @@ const name = `${prefix}-grid`;
 export default defineComponent({
   name,
   props: gridProps,
-  setup(props) {
+  setup(props, { slots }) {
     const { column, gutter, border, align } = toRefs(props);
     const rootStyle = computed(() => {
       if (column.value === 0) return [];
@@ -46,11 +29,18 @@ export default defineComponent({
       gutter,
     });
 
-    return {
-      name,
-      column,
-      rootStyle,
-    };
+    const classes = computed(() => [
+      `${name}`,
+      {
+        [`${name}--card`]: props.theme === 'card',
+        [`${name}--auto-size`]: props.column === 0,
+        [`${name}--bordered`]: border && !gutter,
+      },
+    ]);
+    return () => (
+      <div class={classes.value} style={rootStyle.value}>
+        {slots.default?.()}
+      </div>
+    );
   },
 });
-</script>
diff --git a/src/grid/index.ts b/src/grid/index.ts
index b0cb83d36..c93bac818 100644
--- a/src/grid/index.ts
+++ b/src/grid/index.ts
@@ -1,5 +1,5 @@
-import LocalGrid from './grid.vue';
-import LocalGridItem from './grid-item.vue';
+import LocalGrid from './grid';
+import LocalGridItem from './grid-item';
 import { withInstall, WithInstallType } from '../shared';
 
 import { TdGridItemProps, TdGridProps } from './type';