diff --git a/src/grid/index.js b/src/grid/index.js
deleted file mode 100644
index 54ab5a419..000000000
--- a/src/grid/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/* istanbul ignore file */
-export { default as NRow } from './src/Row.vue'
-export { default as NCol } from './src/Col.vue'
diff --git a/src/grid/index.ts b/src/grid/index.ts
new file mode 100644
index 000000000..dadda9793
--- /dev/null
+++ b/src/grid/index.ts
@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+export { default as NRow } from './src/Row'
+export { default as NCol } from './src/Col'
diff --git a/src/grid/src/Col.tsx b/src/grid/src/Col.tsx
new file mode 100644
index 000000000..610953078
--- /dev/null
+++ b/src/grid/src/Col.tsx
@@ -0,0 +1,116 @@
+import { h, computed, defineComponent, inject, renderSlot, PropType } from 'vue'
+import { formatLength } from '../../_utils'
+import { useStyle } from '../../_mixins'
+import type { RowInjection } from './Row'
+import style from './styles/index.cssr'
+
+type Span =
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17
+  | 18
+  | 19
+  | 20
+  | 21
+  | 22
+  | 23
+  | 24
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10'
+  | '11'
+  | '12'
+  | '13'
+  | '14'
+  | '15'
+  | '16'
+  | '17'
+  | '18'
+  | '19'
+  | '20'
+  | '21'
+  | '22'
+  | '23'
+  | '24'
+
+export default defineComponent({
+  name: 'Col',
+  props: {
+    span: {
+      type: [String, Number] as PropType<Span>,
+      default: 1
+    },
+    push: {
+      type: [String, Number] as PropType<Span>,
+      default: 0
+    },
+    pull: {
+      type: [String, Number] as PropType<Span>,
+      default: 0
+    },
+    offset: {
+      type: [String, Number] as PropType<Span>,
+      default: 0
+    }
+  },
+  setup (props) {
+    useStyle('Grid', style)
+    const NRow = inject<RowInjection>('NRow') as RowInjection
+    return {
+      gutter: computed(() => NRow.gutter),
+      stylePadding: computed(
+        () =>
+          `${formatLength(NRow.verticalGutter, {
+            c: 0.5
+          })} ${formatLength(NRow.horizontalGutter, { c: 0.5 })}`
+      ),
+      mergedPush: computed(() => Number(props.push) - Number(props.pull))
+    }
+  },
+  render () {
+    const { $slots, span, mergedPush, offset, stylePadding, gutter } = this
+    return (
+      <div
+        class={[
+          'n-col',
+          {
+            [`n-col--${span}-span`]: true,
+            [`n-col--${mergedPush}-push`]: mergedPush > 0,
+            [`n-col--${-mergedPush}-pull`]: mergedPush < 0,
+            [`n-col--${offset}-offset`]: offset
+          }
+        ]}
+        style={{
+          padding: stylePadding
+        }}
+      >
+        {gutter ? (
+          <div>{renderSlot($slots, 'default')}</div>
+        ) : (
+          renderSlot($slots, 'default')
+        )}
+      </div>
+    )
+  }
+})
diff --git a/src/grid/src/Col.vue b/src/grid/src/Col.vue
deleted file mode 100644
index 030573504..000000000
--- a/src/grid/src/Col.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div
-    class="n-col"
-    :class="{
-      [`n-col--${span}-span`]: true,
-      [`n-col--${mergedPush}-push`]: mergedPush > 0,
-      [`n-col--${-mergedPush}-pull`]: mergedPush < 0,
-      [`n-col--${offset}-offset`]: offset
-    }"
-    :style="{
-      padding: stylePadding
-    }"
-  >
-    <div v-if="gutter" class="n-col__box">
-      <slot />
-    </div>
-    <template v-else>
-      <slot />
-    </template>
-  </div>
-</template>
-
-<script>
-import { computed, defineComponent, inject } from 'vue'
-import { formatLength } from '../../_utils'
-import { useStyle } from '../../_mixins'
-import style from './styles/index.cssr.js'
-
-export default defineComponent({
-  name: 'Col',
-  props: {
-    span: {
-      type: [String, Number],
-      default: 1
-    },
-    push: {
-      type: [String, Number],
-      default: 0
-    },
-    pull: {
-      type: [String, Number],
-      default: 0
-    },
-    offset: {
-      type: [String, Number],
-      default: 0
-    }
-  },
-  setup (props) {
-    useStyle('Grid', style)
-    const NRow = inject('NRow')
-    return {
-      gutter: computed(() => NRow.gutter),
-      stylePadding: computed(
-        () =>
-          `${formatLength(NRow.verticalGutter, {
-            c: 0.5
-          })} ${formatLength(NRow.horizontalGutter, { c: 0.5 })}`
-      ),
-      mergedPush: computed(() => props.push - props.pull)
-    }
-  }
-})
-</script>
diff --git a/src/grid/src/Row.vue b/src/grid/src/Row.tsx
similarity index 53%
rename from src/grid/src/Row.vue
rename to src/grid/src/Row.tsx
index 3da64353f..6e37c6f28 100644
--- a/src/grid/src/Row.vue
+++ b/src/grid/src/Row.tsx
@@ -1,37 +1,30 @@
-<template>
-  <div
-    class="n-row"
-    :class="{
-      'n-row--flex': flex
-    }"
-    :style="{
-      margin: styleMargin,
-      width: styleWidth,
-      alignItems: alignItems,
-      justifyContent: justifyContent
-    }"
-  >
-    <slot />
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
+import {
+  defineComponent,
+  h,
+  renderSlot,
+  PropType,
+  provide,
+  reactive,
+  toRef
+} from 'vue'
 import { useMemo } from 'vooks'
 import { formatLength } from '../../_utils'
 import { useStyle } from '../../_mixins'
 import style from './styles/index.cssr.js'
 
+export interface RowInjection {
+  gutter: any
+  verticalGutter: number
+  horizontalGutter: number
+}
+
 export default defineComponent({
   name: 'Row',
-  provide () {
-    return {
-      NRow: this
-    }
-  },
   props: {
     gutter: {
-      type: [Array, Number, String],
+      type: [Array, Number, String] as PropType<
+      string | number | [number, number]
+      >,
       default: 0
     },
     flex: {
@@ -61,11 +54,17 @@ export default defineComponent({
       if (Array.isArray(gutter)) {
         return gutter[0]
       }
-      return gutter
+      return Number(gutter)
     })
+    provide<RowInjection>(
+      'NRow',
+      reactive({
+        gutter: toRef(props, 'gutter'),
+        verticalGutter: verticalGutterRef,
+        horizontalGutter: horizontalGutterRef
+      })
+    )
     return {
-      verticalGutter: verticalGutterRef,
-      horizontalGutter: horizontalGutterRef,
       styleMargin: useMemo(
         () => `0px -${formatLength(horizontalGutterRef.value, { c: 0.5 })}`
       ),
@@ -73,6 +72,25 @@ export default defineComponent({
         () => `calc(100% + ${formatLength(horizontalGutterRef.value)})`
       )
     }
+  },
+  render () {
+    return (
+      <div
+        class={[
+          'n-row',
+          {
+            'n-row--flex': this.flex
+          }
+        ]}
+        style={{
+          margin: this.styleMargin,
+          width: this.styleWidth,
+          alignItems: this.alignItems,
+          justifyContent: this.justifyContent
+        }}
+      >
+        {renderSlot(this.$slots, 'default')}
+      </div>
+    )
   }
 })
-</script>
diff --git a/src/grid/src/styles/index.cssr.js b/src/grid/src/styles/index.cssr.ts
similarity index 95%
rename from src/grid/src/styles/index.cssr.js
rename to src/grid/src/styles/index.cssr.ts
index 3624c760d..4b932550d 100644
--- a/src/grid/src/styles/index.cssr.js
+++ b/src/grid/src/styles/index.cssr.ts
@@ -1,7 +1,7 @@
 import { c, cB, cM, cE } from '../../../_utils/cssr'
 
 const positionStyles = Array
-  .apply(null, { length: 24 })
+  .apply(null, { length: 24 } as any)
   .map((_, index) => {
     const prefixIndex = index + 1
     const percent = (1 / 24 * prefixIndex * 100).toFixed(2) + '%'