fix(col): fix/col-style-gets-affected-by-invalid-value (#1370)

* fix(col): fix/col-style-gets-affected-by-invalid-value

- Fix the 0 value that impacts the layout rule. Fix #1366

* remove !important syntax

* fix lint issue

packages/col/src/col.ts

@@ -55,8 +55,6 @@ const ElCol = defineComponent({
     const style = computed(() => {
       if (gutter) {
         return {
-          display: 'block',
-          minHeight: '1px',
           paddingLeft: gutter / 2 + 'px',
           paddingRight: gutter / 2 + 'px',
         }
@@ -68,7 +66,7 @@ const ElCol = defineComponent({
       const pos = ['span', 'offset', 'pull', 'push'] as const
       pos.forEach(prop => {
         const size = props[prop]
-        if (typeof size === 'number' && size >= 0) {
+        if (typeof size === 'number' && size > 0) {
           ret.push(prop !== 'span' ? `el-col-${prop}-${props[prop]}` : `el-col-${props[prop]}`)
         }
       })
@@ -85,6 +83,11 @@ const ElCol = defineComponent({
           })
         }
       })
+      // this is for the fix
+      if (gutter) {
+        ret.push('is-guttered')
+      }
+
       return ret
     })
 

packages/theme-chalk/src/col.scss

@@ -1,13 +1,21 @@
-@import "./common/var.scss";
-@import "./mixins/mixins.scss";
+@import './common/var.scss';
+@import './mixins/mixins.scss';
 
-[class*="el-col-"] {
+[class*='el-col-'] {
   float: left;
   box-sizing: border-box;
+  @include when(guttered) {
+    display: block;
+    min-height: 1px;
+  }
 }
 
 .el-col-0 {
   display: none;
+  // to avoid introducing !important syntax, redundant css rule is required due to selector priority.
+  @include when(guttered) {
+    display: none;
+  }
 }
 
 @for $i from 0 through 24 {
@@ -34,6 +42,9 @@
 @include res(xs) {
   .el-col-xs-0 {
     display: none;
+    @include when(guttered) {
+      display: none;
+    }
   }
   @for $i from 0 through 24 {
     .el-col-xs-#{$i} {
@@ -60,6 +71,9 @@
 @include res(sm) {
   .el-col-sm-0 {
     display: none;
+    @include when(guttered) {
+      display: none;
+    }
   }
   @for $i from 0 through 24 {
     .el-col-sm-#{$i} {
@@ -86,6 +100,9 @@
 @include res(md) {
   .el-col-md-0 {
     display: none;
+    @include when(guttered) {
+      display: none;
+    }
   }
   @for $i from 0 through 24 {
     .el-col-md-#{$i} {
@@ -112,6 +129,9 @@
 @include res(lg) {
   .el-col-lg-0 {
     display: none;
+    @include when(guttered) {
+      display: none;
+    }
   }
   @for $i from 0 through 24 {
     .el-col-lg-#{$i} {
@@ -138,6 +158,9 @@
 @include res(xl) {
   .el-col-xl-0 {
     display: none;
+    @include when(guttered) {
+      display: none;
+    }
   }
   @for $i from 0 through 24 {
     .el-col-xl-#{$i} {