diff --git a/example/app.json b/example/app.json
index 8c9d7fb2..3813fe43 100644
--- a/example/app.json
+++ b/example/app.json
@@ -125,6 +125,7 @@
"van-index-bar": "./dist/index-bar/index",
"van-index-anchor": "./dist/index-anchor/index",
"van-grid": "./dist/grid/index",
+ "van-grid-demo": "./dist/grid/demo/index",
"van-grid-item": "./dist/grid-item/index",
"van-dropdown-menu": "./dist/dropdown-menu/index",
"van-dropdown-item": "./dist/dropdown-item/index",
diff --git a/example/pages/grid/index.js b/example/pages/grid/index.js
index d77b9563..cc11dfda 100644
--- a/example/pages/grid/index.js
+++ b/example/pages/grid/index.js
@@ -1,10 +1,3 @@
import Page from '../../common/page';
-Page({
- data: {
- array3: [0, 1, 2],
- array4: [0, 1, 2, 3],
- array6: [0, 1, 2, 3, 4, 5],
- array8: [0, 1, 2, 3, 4, 5, 6, 7],
- },
-});
+Page();
diff --git a/example/pages/grid/index.wxml b/example/pages/grid/index.wxml
index 1f1e0942..04f433f0 100644
--- a/example/pages/grid/index.wxml
+++ b/example/pages/grid/index.wxml
@@ -1,51 +1 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/example/pages/grid/index.wxss b/example/pages/grid/index.wxss
deleted file mode 100644
index 40a8c178..00000000
--- a/example/pages/grid/index.wxss
+++ /dev/null
@@ -1 +0,0 @@
-/* empty */
diff --git a/packages/grid/demo/index.json b/packages/grid/demo/index.json
new file mode 100644
index 00000000..3c0ef337
--- /dev/null
+++ b/packages/grid/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-grid": "../../grid/index",
+ "van-grid-item": "../../grid-item/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/packages/grid/demo/index.ts b/packages/grid/demo/index.ts
new file mode 100644
index 00000000..e55b819d
--- /dev/null
+++ b/packages/grid/demo/index.ts
@@ -0,0 +1,10 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+ data: {
+ array3: [0, 1, 2],
+ array4: [0, 1, 2, 3],
+ array6: [0, 1, 2, 3, 4, 5],
+ array8: [0, 1, 2, 3, 4, 5, 6, 7],
+ },
+});
diff --git a/packages/grid/demo/index.wxml b/packages/grid/demo/index.wxml
new file mode 100644
index 00000000..1f1e0942
--- /dev/null
+++ b/packages/grid/demo/index.wxml
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/grid/test/__snapshots__/demo.spec.ts.snap b/packages/grid/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..1c68c7e8
--- /dev/null
+++ b/packages/grid/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,1246 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基本用法
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义列数
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义内容
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正方形格子
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+ 格子间距
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+ 内容横排
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+ 页面跳转
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Navigate 跳转
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ReLaunch 跳转
+
+
+
+
+
+
+
+
+
+
+
+
+ 徽标提示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 99+
+
+
+
+
+
+
+
+ 文字
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/grid/test/demo.spec.ts b/packages/grid/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/grid/test/demo.spec.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+ const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+ rootPath: path.resolve(__dirname, '../../'),
+ });
+ const comp = simulate.render(id);
+ comp.attach(document.createElement('parent-wrapper'));
+ expect(comp.toJSON()).toMatchSnapshot();
+});