feat(Grid): add direction prop (#6256)

src/grid-item/index.js

@@ -120,7 +120,14 @@ export default createComponent({
   },
 
   render() {
-    const { center, border, square, gutter, clickable } = this.parent;
+    const {
+      center,
+      border,
+      square,
+      gutter,
+      direction,
+      clickable,
+    } = this.parent;
 
     return (
       <div class={[bem({ square })]} style={this.style}>
@@ -129,12 +136,15 @@ export default createComponent({
           role={clickable ? 'button' : null}
           tabindex={clickable ? 0 : null}
           class={[
-            bem('content', {
-              center,
-              square,
-              clickable,
-              surround: border && gutter,
-            }),
+            bem('content', [
+              direction,
+              {
+                center,
+                square,
+                clickable,
+                surround: border && gutter,
+              },
+            ]),
             { [BORDER]: border },
           ]}
           onClick={this.onClick}

src/grid-item/index.less

@@ -8,6 +8,25 @@
     height: 0;
   }
 
+  &__icon {
+    font-size: @grid-item-icon-size;
+  }
+
+  &__icon-wrapper {
+    position: relative;
+  }
+
+  &__text {
+    color: @grid-item-text-color;
+    font-size: @grid-item-text-font-size;
+    line-height: 1.5;
+    word-wrap: break-word;
+  }
+
+  &__icon + &__text {
+    margin-top: @padding-xs;
+  }
+
   &__content {
     display: flex;
     flex-direction: column;
@@ -33,6 +52,15 @@
       justify-content: center;
     }
 
+    &--horizontal {
+      flex-direction: row;
+
+      .van-grid-item__icon + .van-grid-item__text {
+        margin-top: 0;
+        margin-left: @padding-xs;
+      }
+    }
+
     &--surround {
       &::after {
         border-width: @border-width-base;
@@ -47,22 +75,4 @@
       }
     }
   }
-
-  &__icon {
-    font-size: @grid-item-icon-size;
-  }
-
-  &__icon-wrapper {
-    position: relative;
-  }
-
-  &__text {
-    color: @grid-item-text-color;
-    font-size: @grid-item-text-font-size;
-    word-wrap: break-word;
-  }
-
-  &__icon + &__text {
-    margin-top: @padding-xs;
-  }
 }