From 0d95eae0ed31531c1495c954bd788ec1f9edff41 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Tue, 26 Nov 2019 20:59:39 +0800
Subject: [PATCH] fix(Grid): gutter not work correct with square (#2394)

fix #2373
---
 packages/grid-item/index.ts   | 21 ++++++++++++++++++---
 packages/grid-item/index.wxml |  5 ++++-
 packages/grid/index.ts        |  3 ++-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/grid-item/index.ts b/packages/grid-item/index.ts
index 9a4cf918..f666a571 100644
--- a/packages/grid-item/index.ts
+++ b/packages/grid-item/index.ts
@@ -1,5 +1,6 @@
 import { link } from '../mixins/link';
 import { VantComponent } from '../common/component';
+import { addUnit } from '../common/utils';
 
 VantComponent({
   relation: {
@@ -34,7 +35,7 @@ VantComponent({
       const { columnNum, border, square, gutter, clickable, center } = data;
       const width = `${100 / columnNum}%`;
 
-      const styleWrapper: Array<string> = [];
+      const styleWrapper = [];
       styleWrapper.push(`width: ${width}`);
 
       if (square) {
@@ -42,16 +43,30 @@ VantComponent({
       }
 
       if (gutter) {
-        styleWrapper.push(`padding-right: ${gutter}px`);
+        const gutterValue = addUnit(gutter);
+        styleWrapper.push(`padding-right: ${gutterValue}`);
 
         const index = children.indexOf(this);
         if (index >= columnNum) {
-          styleWrapper.push(`margin-top: ${gutter}px`);
+          styleWrapper.push(`margin-top: ${gutterValue}`);
         }
       }
 
+      let contentStyle = '';
+
+      if (square && gutter) {
+        const gutterValue = addUnit(gutter);
+
+        contentStyle = `
+          right: ${gutterValue};
+          bottom: ${gutterValue};
+          height: auto;
+        `;
+      }
+
       this.setData({
         style: styleWrapper.join('; '),
+        contentStyle,
         center,
         border,
         square,
diff --git a/packages/grid-item/index.wxml b/packages/grid-item/index.wxml
index 4f8bb75f..2fb189b8 100644
--- a/packages/grid-item/index.wxml
+++ b/packages/grid-item/index.wxml
@@ -1,7 +1,10 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <view class="{{ utils.bem('grid-item', { square }) }}" style="{{ style }}" bindtap="onClick">
-  <view class="{{ utils.bem('grid-item__content', { center, square, clickable, surround: border && gutter }) }} {{ border ? 'van-hairline--surround' : '' }}">
+  <view
+    class="{{ utils.bem('grid-item__content', { center, square, clickable, surround: border && gutter }) }} {{ border ? 'van-hairline--surround' : '' }}"
+    style="{{ contentStyle }}"
+  >
     <block wx:if="{{ useSlot }}">
       <slot />
     </block>
diff --git a/packages/grid/index.ts b/packages/grid/index.ts
index ba5d3b19..e3bc2cc4 100644
--- a/packages/grid/index.ts
+++ b/packages/grid/index.ts
@@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { addUnit } from '../common/utils';
 
 VantComponent({
   relation: {
@@ -53,7 +54,7 @@ VantComponent({
     const { gutter } = this.data;
     if (gutter) {
       this.setData({
-        style: `padding-left: ${gutter}px`
+        style: `padding-left: ${addUnit(gutter)}`
       });
     }
   },