diff --git a/example/pages/grid/index.wxml b/example/pages/grid/index.wxml
index e6f6cbfa..56280724 100644
--- a/example/pages/grid/index.wxml
+++ b/example/pages/grid/index.wxml
@@ -30,6 +30,12 @@
   </van-grid>
 </demo-block>
 
+<demo-block title="内容横排">
+  <van-grid direction="horizontal" column-num="3">
+    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array3 }}" wx:key="*this" />
+  </van-grid>
+</demo-block>
+
 <demo-block title="页面跳转">
   <van-grid clickable column-num="2">
     <van-grid-item icon="home-o" link-type="navigateTo" url="/pages/dashboard/index" text="Navigate 跳转" />
@@ -37,7 +43,7 @@
   </van-grid>
 </demo-block>
 
-<demo-block title="提示信息">
+<demo-block title="徽标提示">
   <van-grid column-num="2">
     <van-grid-item icon="home-o" text="文字" dot />
     <van-grid-item icon="search" text="文字" info="99+" />
diff --git a/packages/grid-item/index.less b/packages/grid-item/index.less
index c43fc105..d824ab8a 100644
--- a/packages/grid-item/index.less
+++ b/packages/grid-item/index.less
@@ -41,13 +41,26 @@
       left: 0;
     }
 
+    &--horizontal {
+      flex-direction: row;
+
+      .van-grid-item__icon + .van-grid-item__text {
+        margin-top: 0;
+        margin-left: @padding-xs;
+      }
+    }
+
     &--clickable:active {
       .theme(background-color, '@grid-item-content-active-color');
     }
   }
 
   &__icon {
+    display: flex;
+    align-items: center;
+
     .theme(font-size, '@grid-item-icon-size');
+    .theme(height, '@grid-item-icon-size');
   }
 
   &__text {
diff --git a/packages/grid-item/index.ts b/packages/grid-item/index.ts
index f20f9c4c..1678b601 100644
--- a/packages/grid-item/index.ts
+++ b/packages/grid-item/index.ts
@@ -36,7 +36,15 @@ VantComponent({
       }
 
       const { data, children } = this.parent;
-      const { columnNum, border, square, gutter, clickable, center } = data;
+      const {
+        columnNum,
+        border,
+        square,
+        gutter,
+        clickable,
+        center,
+        direction,
+      } = data;
       const width = `${100 / columnNum}%`;
 
       const styleWrapper = [];
@@ -76,6 +84,7 @@ VantComponent({
         square,
         gutter,
         clickable,
+        direction,
       });
     },
 
diff --git a/packages/grid-item/index.wxml b/packages/grid-item/index.wxml
index 061f43c3..57a96281 100644
--- a/packages/grid-item/index.wxml
+++ b/packages/grid-item/index.wxml
@@ -2,7 +2,7 @@
 
 <view class="custom-class {{ utils.bem('grid-item', { square }) }}" style="{{ viewStyle }}" bindtap="onClick">
   <view
-    class="content-class {{ utils.bem('grid-item__content', { center, square, clickable, surround: border && gutter }) }} {{ border ? 'van-hairline--surround' : '' }}"
+    class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, clickable, surround: border && gutter }]) }} {{ border ? 'van-hairline--surround' : '' }}"
     style="{{ contentStyle }}"
   >
     <block wx:if="{{ useSlot }}">
diff --git a/packages/grid/index.ts b/packages/grid/index.ts
index 4332b3fc..fdc1b32b 100644
--- a/packages/grid/index.ts
+++ b/packages/grid/index.ts
@@ -37,6 +37,10 @@ VantComponent({
       value: true,
       observer: 'updateChildren',
     },
+    direction: {
+      type: String,
+      observer: 'updateChildren',
+    },
   },
 
   data: {