diff --git a/packages/devui-vue/devui/grid/__tests__/grid.spec.ts b/packages/devui-vue/devui/grid/__tests__/grid.spec.ts
deleted file mode 100644
index fa33b9765e7ec5a8972716e9ccc95f1c53e2e097..0000000000000000000000000000000000000000
--- a/packages/devui-vue/devui/grid/__tests__/grid.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { Row } from '../index';
-
-describe('grid test', () => {
-  it('grid init render', async () => {
-    // todo
-  })
-})
diff --git a/packages/devui-vue/devui/grid/__tests__/grid.spec.tsx b/packages/devui-vue/devui/grid/__tests__/grid.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..85861434d1bc48b90aa59af899dc14f6ad2114bc
--- /dev/null
+++ b/packages/devui-vue/devui/grid/__tests__/grid.spec.tsx
@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils'
+import { Row, Col } from '../index'
+import { Justify, Align, ColProps } from '../src/grid-types'
+import { screenMedias } from '../src/use-screen'
+
+describe('d-row', () => {
+  window.matchMedia = jest.fn().mockImplementation(query => {
+    return {
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // deprecated
+      removeListener: jest.fn(), // deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    }
+  })
+
+  it('d-row init', () => {
+    const wrapper = mount(Row)
+    expect(wrapper.classes()).toEqual(['devui-row', 'devui-row-align-top', 'devui-row-justify-start'])
+  })
+  
+  const justify: Justify[] = ['start', 'end', 'center', 'around', 'between']
+  justify.forEach(item => {
+    it(`d-row justify ${item}`, () => {
+      const wrapper = mount(Row, {
+        props: { justify: item }
+      })
+      expect(wrapper.classes(`devui-row-justify-${item}`)).toBe(true)
+    })
+  })
+
+  const align: Align[] = ['top', 'middle', 'bottom']
+  align.forEach(item => {
+    it(`d-row align ${item}`, () => {
+      const wrapper = mount(Row, {
+        props: { align: item }
+      })
+      expect(wrapper.classes(`devui-row-align-${item}`)).toBe(true)
+    })
+  })
+
+  it('d-row wrap', () => {
+    const wrapper = mount(Row, {
+      props: { wrap: true }
+    })
+    expect(wrapper.classes('devui-row-wrap')).toBe(true)
+  })
+})
+
+describe('d-col', () => {
+
+  const value = 8
+
+  it('d-col flex', () => {
+    const component = <Row>
+      <Col flex={value}></Col>
+    </Row>
+    const wrapper = mount(component)
+    expect(wrapper.find('.devui-col').attributes()).toMatchObject({ style: `flex: ${value} ${value} auto;` })
+  })
+
+
+  it('d-col order', () => {
+    const component = <Row>
+      <Col order={value}></Col>
+    </Row>
+    const wrapper = mount(component)
+    expect(wrapper.find('.devui-col').attributes()).toMatchObject({ style: `order: ${value};` })
+  })
+
+  const props: (keyof ColProps)[] = ['span', 'offset', 'pull', 'push']
+  props.forEach(item => {
+    const prop = { [item]: value }
+    const component = <Row>
+      <Col { ...prop }></Col>
+    </Row>
+    it(`d-col ${item}`, () => {
+      const wrapper = mount(component)
+      expect(wrapper.findAll(`.devui-col-${item}-${value}`).length).toBe(1)
+    })
+  })
+
+  const sizes = Object.keys(screenMedias) as (keyof typeof screenMedias)[]
+  sizes.forEach(item => {
+    const prop = { [item]: value }
+    const component = <Row>
+      <Col { ...prop }></Col>
+    </Row>
+    it(`d-col ${item} span`, () => {
+      const wrapper = mount(component)
+      console.log(wrapper.html())
+      expect(wrapper.findAll(`.devui-col-${item}-span-${value}`).length)
+    })
+  })
+ 
+  it('d-row gutter', () => {
+    const component1 = <Row gutter={8}>
+      <Col></Col>
+    </Row>
+    const component2 = <Row gutter={[8, 8]}>
+      <Col></Col>
+    </Row>
+    // const component3 = <Row gutter={{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }}>
+    //   <Col></Col>
+    // </Row>
+    const wrapper1 = mount(component1)
+    const wrapper2 = mount(component2)
+    // const wrapper3 = mount(component3)
+    expect(wrapper1.find('.devui-col').attributes()).toMatchObject({ style: 'padding: 0px 4px 0px 4px;' })
+    expect(wrapper2.find('.devui-col').attributes()).toMatchObject({ style: 'padding: 4px 4px 4px 4px;' })
+    // expect(wrapper3.find('.devui-col').attributes()).toMatchObject({ style: 'padding: 4px 4px 4px 4px;' })
+  })
+})
diff --git a/packages/devui-vue/devui/grid/src/grid-types.ts b/packages/devui-vue/devui/grid/src/grid-types.ts
index a6491cf262525c3f8184abac3e93dd9c568abb29..4d4328b7217f90122d3b2c15ad3ffbd8661c8cd5 100644
--- a/packages/devui-vue/devui/grid/src/grid-types.ts
+++ b/packages/devui-vue/devui/grid/src/grid-types.ts
@@ -6,11 +6,13 @@ export type Justify = 'start' | 'end' | 'center' | 'around' | 'between'
 
 export interface GutterScreenSizes {
   xs?: number | number[]
-  sm: number | number[]
-  md: number | number[]
-  lg: number | number[]
-  xl: number | number[]
-  xxl: number | number[]
+  sm?: number | number[]
+  md?: number | number[]
+  lg?: number | number[]
+  xl?: number | number[]
+  xxl?: number | number[]
+  // 如果没有必选项，gutter将是unknown类型
+  [key: string]: number | number[]
 } 
 
 export const rowProps = {
diff --git a/packages/devui-vue/devui/grid/src/use-grid.ts b/packages/devui-vue/devui/grid/src/use-grid.ts
index a303a3624638d7767d3190ce7c4b89468c682f58..b32211bf4f0c7cab2d6162e64ce65d200ab7b736 100644
--- a/packages/devui-vue/devui/grid/src/use-grid.ts
+++ b/packages/devui-vue/devui/grid/src/use-grid.ts
@@ -18,7 +18,7 @@ export function useColClassNames (props: ColPropsBaseClass) {
 }
 
 function setSpace (val:string) {
-    return val && ` ${val.trim()} `
+    return ` ${val.trim()}${val && ' '}`
 }
 
 export function useSize (colSizes: ScreenSizes) {
diff --git a/packages/devui-vue/devui/grid/src/use-screen.ts b/packages/devui-vue/devui/grid/src/use-screen.ts
index 98d86f99acbe02fea94eb585b07ba9ec490b8a70..2c99c63048bfbbea3b2f2ee661b52b56f453653e 100644
--- a/packages/devui-vue/devui/grid/src/use-screen.ts
+++ b/packages/devui-vue/devui/grid/src/use-screen.ts
@@ -1,7 +1,7 @@
 
 export const RESULT_SCREEN = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs']
 
-const screenMedias = {
+export const screenMedias = {
     xs: 'screen and (max-width: 575px)',
     sm: 'screen and (min-width: 576px)',
     md: 'screen and (min-width: 768px)',
diff --git a/packages/devui-vue/docs/components/grid/index.md b/packages/devui-vue/docs/components/grid/index.md
index 2a67551b3e7570f72b8bff6ff2f0fa15a06f8c87..a45e41dcd26ac2d5b6ac857ae8ccb01eaa7a5ca0 100644
--- a/packages/devui-vue/docs/components/grid/index.md
+++ b/packages/devui-vue/docs/components/grid/index.md
@@ -259,7 +259,7 @@ Col的flex属性支持flex填充。
   <d-row>
     <d-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</d-col>
     <d-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">Col</d-col>
-    <d-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</d-col>
+    <d-col :xs="2">Col</d-col>
   </d-row>
 </template>
 ```
@@ -287,7 +287,7 @@ Col的flex属性支持flex填充。
 
 :::
 
-### d-grid
+### API
 
 d-row 参数
 
@@ -295,7 +295,7 @@ d-row 参数
 | ---- | ---- | ---- | ---- | --------- | --------- |
 | align | `string` | `'top'` | flex 布局下的垂直对齐方式：`'top'`，`'middle'`，`'bottom'` | [垂直对齐](#垂直对齐) |  |
 | justify | `string` | `'start'` | flex 布局下的垂直对齐方式：`'start'`，`'end'`，`'center'`，`'space-around'`，`'space-between'` | [垂直对齐](#垂直对齐) |  |
-| gutter |  `number\|array\|object`    |  0   | 栅格间隔，数值形式：水平间距。对象形式支持响应式： { xs: 8, sm: 16, md: 24}。数组形式：[水平间距, 垂直间距]。 |     [对齐](#对齐)      |           |
+| gutter |  `number\|array\|object`    |  0   | 栅格间隔，数值形式：水平间距。对象形式支持响应式： { xs: 8, sm: 16, md: 24}。数组形式：[水平间距, 垂直间距]。 |     [子元素的间隔](#子元素的间隔)      |           |
 | wrap | `boolean` | false | 是否自动换行 |           |           |
 
 d-col 参数