diff --git a/src/grid-item/index.less b/src/grid-item/index.less
index 2c702b236..f6b624556 100644
--- a/src/grid-item/index.less
+++ b/src/grid-item/index.less
@@ -13,8 +13,8 @@
     flex-direction: column;
     box-sizing: border-box;
     height: 100%;
-    padding: 15px 10px;
-    background-color: #fff;
+    padding: @grid-item-content-padding;
+    background-color: @grid-item-content-background-color;
 
     &::after {
       z-index: 1;
@@ -40,17 +40,17 @@
     }
 
     &--clickable:active {
-      background-color: @active-color;
+      background-color: @grid-item-content-active-color;
     }
   }
 
   &__icon {
-    font-size: 28px;
+    font-size: @grid-item-icon-size;
   }
 
   &__text {
-    color: @gray-darker;
-    font-size: 12px;
+    color: @grid-item-text-color;
+    font-size: @grid-item-text-font-size;
   }
 
   &__icon + &__text {
diff --git a/src/style/var.less b/src/style/var.less
index 463057c5d..208f0dc30 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -232,6 +232,14 @@
 @field-error-message-text-color: 12px;
 @field-text-area-min-height: 60px;
 
+// GridItem
+@grid-item-content-padding: 15px 10px;
+@grid-item-content-background-color: @white;
+@grid-item-content-active-color: @active-color;
+@grid-item-icon-size: 28px;
+@grid-item-text-color: @gray-darker;
+@grid-item-text-font-size: 12px;
+
 // GoodsAction
 @goods-action-background-color: @white;
 @goods-action-icon-width: 15%;