[new feature] add grid component (#3669)

src/grid/README.md

@@ -0,0 +1,133 @@
+# Grid
+
+### Install
+
+``` javascript
+import { Grid, GridItem } from 'vant';
+
+Vue.use(Grid).use(GridItem);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-grid>
+  <van-grid-item
+    v-for="value in 4"
+    :key="value"
+    icon="photo-o"
+    text="Text"
+  />
+</van-grid>
+```
+
+### Column Num
+
+```html
+<van-grid :column-num="3">
+  <van-grid-item
+    v-for="value in 6"
+    :key="value"
+    icon="photo-o"
+    text="Text"
+  />
+</van-grid>
+```
+
+### Custom Content
+
+```html
+<van-grid :border="false" :column-num="3">
+  <van-grid-item>
+    <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+  </van-grid-item>
+  <van-grid-item>
+    <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+  </van-grid-item>
+  <van-grid-item>
+    <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
+  </van-grid-item>
+</van-grid>
+```
+
+### Square
+
+```html
+<van-grid square>
+  <van-grid-item
+    v-for="value in 8"
+    :key="value"
+    icon="photo-o"
+    text="Text"
+  />
+</van-grid>
+```
+
+### Gutter
+
+```html
+<van-grid :gutter="10">
+  <van-grid-item
+    v-for="value in 8"
+    :key="value"
+    icon="photo-o"
+    text="Text"
+  />
+</van-grid>
+```
+
+### Route
+
+```html
+<van-grid clickable :column-num="2">
+  <van-grid-item
+    icon="home-o"
+    text="Vue Router"
+    to="/"
+  />
+  <van-grid-item
+    icon="search"
+    text="URL"
+    url="https://www.baidu.com"
+  />
+</van-grid>
+```
+
+## API
+
+### Grid Props
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|------|
+| column-num | Column Num | `Number` | `4` |
+| gutter | Gutter | `String | Number` | `0` |
+| border | Whether to show border | `Boolean` | `true` |
+| center | Whether to center content | `Boolean` | `true` |
+| square | Whether to be square shape | `Boolean` | `false` |
+| clickable | Whether to show click feedback when clicked | `Boolean` | `false` |
+
+### GridItem Props
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|------|
+| text | Text | `String` | - |
+| icon | Icon name or URL | `String` | - |
+| url | Link URL | `String` | - |
+| to | Target route of the link, same as to of vue-router | `String | Object` | - |
+| replace | If true, the navigation will not leave a history record | `Boolean` | `false` |
+
+### GridItem Events
+
+| Event | Description | Arguments |
+|------|------|------|
+| click | Triggered when clicked | event: Event |
+
+### GridItem Slots
+
+| Name | Description |
+|------|------|
+| default | Custom content |
+| icon | Custom icon |
+| text | Custom text |

src/grid/README.zh-CN.md

@@ -0,0 +1,149 @@
+# Grid 宫格
+
+### 介绍
+
+宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航
+
+### 引入
+
+``` javascript
+import { Grid, GridItem } from 'vant';
+
+Vue.use(Grid).use(GridItem);
+```
+
+## 代码演示
+
+### 基本用法
+
+通过`icon`属性设置格子内的图标，`text`属性设置文字内容
+
+```html
+<van-grid>
+  <van-grid-item
+    v-for="value in 4"
+    :key="value"
+    icon="photo-o"
+    text="文字"
+  />
+</van-grid>
+```
+
+### 自定义列数
+
+默认一行展示四个格子，可以通过`column-num`自定义列数
+
+```html
+<van-grid :column-num="3">
+  <van-grid-item
+    v-for="value in 6"
+    :key="value"
+    icon="photo-o"
+    text="文字"
+  />
+</van-grid>
+```
+
+### 自定义内容
+
+通过插槽可以自定义格子展示的内容
+
+```html
+<van-grid :border="false" :column-num="3">
+  <van-grid-item>
+    <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+  </van-grid-item>
+  <van-grid-item>
+    <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+  </van-grid-item>
+  <van-grid-item>
+    <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
+  </van-grid-item>
+</van-grid>
+```
+
+### 正方形格子
+
+设置`square`属性后，格子的高度会和宽度保持一致
+
+```html
+<van-grid square>
+  <van-grid-item
+    v-for="value in 8"
+    :key="value"
+    icon="photo-o"
+    text="文字"
+  />
+</van-grid>
+```
+
+### 格子间距
+
+通过`gutter`属性设置格子之间的距离
+
+```html
+<van-grid :gutter="10">
+  <van-grid-item
+    v-for="value in 8"
+    :key="value"
+    icon="photo-o"
+    text="文字"
+  />
+</van-grid>
+```
+
+### 页面导航
+
+通过`to`属性设置`vue-router`跳转链接，通过`url`属性设置 URL 跳转链接
+
+```html
+<van-grid clickable :column-num="2">
+  <van-grid-item
+    icon="home-o"
+    text="路由跳转"
+    to="/"
+  />
+  <van-grid-item
+    icon="search"
+    text="URL 跳转"
+    url="https://www.baidu.com"
+  />
+</van-grid>
+```
+
+## API
+
+### Grid Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| column-num | 列数 | `Number` | `4` | 2.0.4 |
+| gutter | 格子之间的间距，默认单位为`px` | `String | Number` | `0` | - |
+| border | 是否显示边框 | `Boolean` | `true` | - |
+| center | 是否将格子内容居中显示 | `Boolean` | `true` | - |
+| square | 是否将格子固定为正方形 | `Boolean` | `false` | - |
+| clickable | 是否开启格子点击反馈 | `Boolean` | `false` | - |
+
+### GridItem Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| text | 文字 | `String` | - | - |
+| icon | 图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - |
+| url | 跳转链接 | `String` | - | - |
+| to | 路由跳转对象，同 vue-router 的 to 属性 | `String | Object` | - | - |
+| replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - |
+
+### GridItem Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| click | 点击格子时触发 | event: Event |
+
+### GridItem Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 自定义宫格的所有内容 |
+| icon | 自定义图标 |
+| text | 自定义文字 |

src/grid/demo/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-grid>
+        <van-grid-item
+          v-for="i in 4"
+          :key="i"
+          icon="photo-o"
+          :text="$t('text')"
+        />
+      </van-grid>
+    </demo-block>
+
+    <demo-block :title="$t('columnNum')">
+      <van-grid :column-num="3">
+        <van-grid-item
+          v-for="i in 6"
+          :key="i"
+          icon="photo-o"
+          :text="$t('text')"
+        />
+      </van-grid>
+    </demo-block>
+
+    <demo-block :title="$t('customContent')">
+      <van-grid
+        :border="false"
+        :column-num="3"
+      >
+        <van-grid-item>
+          <van-image
+            fit="contain"
+            src="https://img.yzcdn.cn/vant/apple-1.jpg"
+          />
+        </van-grid-item>
+        <van-grid-item>
+          <van-image
+            fit="contain"
+            src="https://img.yzcdn.cn/vant/apple-2.jpg"
+          />
+        </van-grid-item>
+        <van-grid-item>
+          <van-image
+            fit="contain"
+            src="https://img.yzcdn.cn/vant/apple-3.jpg"
+          />
+        </van-grid-item>
+      </van-grid>
+    </demo-block>
+
+    <demo-block :title="$t('square')">
+      <van-grid square>
+        <van-grid-item
+          v-for="i in 8"
+          :key="i"
+          icon="photo-o"
+          :text="$t('text')"
+        />
+      </van-grid>
+    </demo-block>
+
+    <demo-block :title="$t('gutter')">
+      <van-grid :gutter="10">
+        <van-grid-item
+          v-for="i in 8"
+          :key="i"
+          icon="photo-o"
+          :text="$t('text')"
+        />
+      </van-grid>
+    </demo-block>
+
+    <demo-block :title="$t('route')">
+      <van-grid
+        clickable
+        :column-num="2"
+      >
+        <van-grid-item
+          icon="home-o"
+          :text="$t('vueRoute')"
+          to="/"
+        />
+        <van-grid-item
+          icon="search"
+          :text="$t('urlRoute')"
+          url="https://www.baidu.com"
+        />
+      </van-grid>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '文字',
+      route: '页面导航',
+      gutter: '格子间距',
+      square: '正方形格子',
+      columnNum: '自定义列数',
+      customContent: '自定义内容',
+      urlRoute: 'URL 跳转',
+      vueRoute: '路由跳转'
+    },
+    'en-US': {
+      text: 'Text',
+      route: 'Route',
+      gutter: 'Gutter',
+      square: 'Square',
+      columnNum: 'Column Num',
+      customContent: 'Custom Content',
+      urlRoute: 'URL',
+      vueRoute: 'Vue Router'
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import '../../style/var';
+
+</style>

src/grid/index.js

@@ -0,0 +1,49 @@
+import { createNamespace, suffixPx } from '../utils';
+import { ParentMixin } from '../mixins/relation';
+
+const [createComponent, bem] = createNamespace('grid');
+
+export default createComponent({
+  mixins: [ParentMixin('vanGrid')],
+
+  props: {
+    gutter: Number,
+    square: Boolean,
+    clickable: Boolean,
+    columnNum: {
+      type: Number,
+      default: 4
+    },
+    center: {
+      type: Boolean,
+      default: true
+    },
+    border: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    style() {
+      const { gutter } = this;
+
+      if (gutter) {
+        return {
+          paddingLeft: suffixPx(gutter)
+        };
+      }
+    }
+  },
+
+  render(h) {
+    return (
+      <div
+        style={this.style}
+        class={[bem(), { 'van-hairline--top': this.border && !this.gutter }]}
+      >
+        {this.slots()}
+      </div>
+    );
+  }
+});

src/grid/index.less

@@ -0,0 +1,6 @@
+@import '../style/var';
+
+.van-grid {
+  display: flex;
+  flex-wrap: wrap;
+}

src/grid/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,166 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-grid van-hairline--top">
+      <div class="van-grid-item" style="flex-basis: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-grid van-hairline--top">
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-grid">
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center">
+          <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img" style="object-fit: contain;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+                <!----></i></div>
+          </div>
+        </div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center">
+          <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-2.jpg" class="van-image__img" style="object-fit: contain;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+                <!----></i></div>
+          </div>
+        </div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center">
+          <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-3.jpg" class="van-image__img" style="object-fit: contain;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+                <!----></i></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-grid van-hairline--top">
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-grid" style="padding-left: 10px;">
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-grid van-hairline--top">
+      <div class="van-grid-item" style="flex-basis: 50%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">路由跳转</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 50%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"><i class="van-icon van-icon-search van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">URL 跳转</span></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/grid/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`sqaure and set gutter 1`] = `
+<div class="van-grid" style="padding-left: 10rem;">
+  <div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
+    <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
+  </div>
+  <div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
+    <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
+  </div>
+  <div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
+    <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
+  </div>
+</div>
+`;

src/grid/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+
+demoTest(Demo);

src/grid/test/index.spec.js

@@ -0,0 +1,40 @@
+import Vue from 'vue';
+import Grid from '..';
+import GridItem from '../../grid-item';
+import { mount } from '../../../test/utils';
+
+Vue.use(Grid);
+Vue.use(GridItem);
+
+test('click grid item', () => {
+  const onClick = jest.fn();
+  const wrapper = mount({
+    template: `
+      <van-grid>
+        <van-grid-item @click="onClick" />
+      </van-grid>
+    `,
+    methods: {
+      onClick
+    }
+  });
+
+  const Item = wrapper.find('.van-grid-item');
+  Item.trigger('click');
+
+  expect(onClick).toHaveBeenCalledTimes(1);
+});
+
+test('sqaure and set gutter', () => {
+  const wrapper = mount({
+    template: `
+      <van-grid square :column-num="2" gutter="10rem">
+        <van-grid-item />
+        <van-grid-item />
+        <van-grid-item />
+      </van-grid>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});