diff --git a/example/project.config.json b/example/project.config.json
index db449356..cd039eb6 100644
--- a/example/project.config.json
+++ b/example/project.config.json
@@ -48,12 +48,6 @@
   "simulatorType": "wechat",
   "simulatorPluginLibVersion": {},
   "condition": {
-    "search": {
-      "list": []
-    },
-    "conversation": {
-      "list": []
-    },
     "plugin": {
       "list": []
     },
@@ -391,6 +385,17 @@
           "pathName": "pages/share-sheet/index",
           "query": "",
           "scene": null
+        },
+        {
+          "name": "col",
+          "pathName": "pages/col/index",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "divider",
+          "pathName": "pages/divider/index",
+          "scene": null
         }
       ]
     }
diff --git a/packages/col/index.ts b/packages/col/index.ts
index 581d04ab..b5d66072 100644
--- a/packages/col/index.ts
+++ b/packages/col/index.ts
@@ -11,21 +11,4 @@ VantComponent({
     span: Number,
     offset: Number,
   },
-
-  data: {
-    viewStyle: '',
-  },
-
-  methods: {
-    setGutter(gutter: number) {
-      const padding = `${gutter / 2}px`;
-      const viewStyle = gutter
-        ? `padding-left: ${padding}; padding-right: ${padding};`
-        : '';
-
-      if (viewStyle !== this.data.viewStyle) {
-        this.setData({ viewStyle });
-      }
-    },
-  },
 });
diff --git a/packages/col/index.wxml b/packages/col/index.wxml
index 52544f09..975348b6 100644
--- a/packages/col/index.wxml
+++ b/packages/col/index.wxml
@@ -1,8 +1,9 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="custom-class {{ utils.bem('col', [span]) }} {{ offset ? 'van-col--offset-' + offset : '' }}"
-  style="{{ viewStyle }}"
+  style="{{ computed.rootStyle({ gutter }) }}"
 >
   <slot />
 </view>
diff --git a/packages/col/index.wxs b/packages/col/index.wxs
new file mode 100644
index 00000000..507c1cb9
--- /dev/null
+++ b/packages/col/index.wxs
@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  if (!data.gutter) {
+    return '';
+  }
+
+  return style({
+    'padding-right': addUnit(data.gutter / 2),
+    'padding-left': addUnit(data.gutter / 2),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};
diff --git a/packages/row/index.ts b/packages/row/index.ts
index de6f44a5..f765c815 100644
--- a/packages/row/index.ts
+++ b/packages/row/index.ts
@@ -6,8 +6,10 @@ VantComponent({
     type: 'descendant',
     current: 'row',
     linked(target) {
-      if (this.data.gutter) {
-        target.setGutter(this.data.gutter);
+      const { gutter } = this.data;
+
+      if (gutter) {
+        target.setData({ gutter });
       }
     },
   },
@@ -19,27 +21,10 @@ VantComponent({
     },
   },
 
-  data: {
-    viewStyle: '',
-  },
-
-  mounted() {
-    if (this.data.gutter) {
-      this.setGutter();
-    }
-  },
-
   methods: {
     setGutter() {
-      const { gutter } = this.data;
-      const margin = `-${Number(gutter) / 2}px`;
-      const viewStyle = gutter
-        ? `margin-right: ${margin}; margin-left: ${margin};`
-        : '';
-
-      this.setData({ viewStyle });
       this.getRelationNodes('../col/index').forEach((col) => {
-        col.setGutter(this.data.gutter);
+        col.setData(this.data.gutter);
       });
     },
   },
diff --git a/packages/row/index.wxml b/packages/row/index.wxml
index ab8fcf58..69a4359b 100644
--- a/packages/row/index.wxml
+++ b/packages/row/index.wxml
@@ -1,3 +1,5 @@
-<view class="custom-class van-row" style="{{ viewStyle }}">
+<wxs src="./index.wxs" module="computed" />
+
+<view class="van-row custom-class" style="{{ computed.rootStyle({ gutter }) }}">
   <slot />
 </view>
diff --git a/packages/row/index.wxs b/packages/row/index.wxs
new file mode 100644
index 00000000..f5c59587
--- /dev/null
+++ b/packages/row/index.wxs
@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  if (!data.gutter) {
+    return '';
+  }
+
+  return style({
+    'margin-right': addUnit(-data.gutter / 2),
+    'margin-left': addUnit(-data.gutter / 2),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};
diff --git a/packages/wxs/add-unit.wxs b/packages/wxs/add-unit.wxs
index 52f18b55..4f33462f 100644
--- a/packages/wxs/add-unit.wxs
+++ b/packages/wxs/add-unit.wxs
@@ -1,5 +1,5 @@
 /* eslint-disable */
-var REGEXP = getRegExp('^\d+(\.\d+)?$');
+var REGEXP = getRegExp('^-?\d+(\.\d+)?$');
 
 function addUnit(value) {
   if (value == null) {
diff --git a/packages/wxs/style.wxs b/packages/wxs/style.wxs
index 3139cde4..c39c810f 100644
--- a/packages/wxs/style.wxs
+++ b/packages/wxs/style.wxs
@@ -6,7 +6,7 @@ function style(styles) {
   if (array.isArray(styles)) {
     return styles
       .filter(function (item) {
-        return item != null;
+        return item != null && item !== '';
       })
       .map(function (item) {
         return style(item);
@@ -18,7 +18,7 @@ function style(styles) {
     return object
       .keys(styles)
       .filter(function (key) {
-        return styles[key] != null;
+        return styles[key] != null && styles[key] !== '';
       })
       .map(function (key) {
         return [key, [styles[key]]].join(':');