From 9ae21bac11248be3047d8a0878172316decdd2dc Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Sat, 20 Jun 2020 13:05:43 +0800
Subject: [PATCH] test(grid): add testcase for grid hidden

---
 .../__snapshots__/index.test.tsx.snap         | 120 ++++++++++++++++++
 components/grid/__tests__/index.test.tsx      |   6 +
 2 files changed, 126 insertions(+)

diff --git a/components/grid/__tests__/__snapshots__/index.test.tsx.snap b/components/grid/__tests__/__snapshots__/index.test.tsx.snap
index 1f8e917..c0253ff 100644
--- a/components/grid/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/grid/__tests__/__snapshots__/index.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
           flex-grow: 0;
           max-width: 4.166666666666667%;
           flex-basis: 4.166666666666667%;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -32,6 +33,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 4.166666666666667%;
             flex-basis: 4.166666666666667%;
+            display: flex;
           }
         }
 
@@ -40,6 +42,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 8.333333333333334%;
             flex-basis: 8.333333333333334%;
+            display: flex;
           }
         }
 
@@ -48,6 +51,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 12.5%;
             flex-basis: 12.5%;
+            display: flex;
           }
         }
 
@@ -56,6 +60,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 16.666666666666668%;
             flex-basis: 16.666666666666668%;
+            display: flex;
           }
         }
 
@@ -64,6 +69,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 20.833333333333336%;
             flex-basis: 20.833333333333336%;
+            display: flex;
           }
         }
       </style></div><style>
@@ -90,6 +96,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
           flex-grow: 0;
           max-width: 4.166666666666667%;
           flex-basis: 4.166666666666667%;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -97,6 +104,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 4.166666666666667%;
             flex-basis: 4.166666666666667%;
+            display: flex;
           }
         }
 
@@ -105,6 +113,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 8.333333333333334%;
             flex-basis: 8.333333333333334%;
+            display: flex;
           }
         }
 
@@ -113,6 +122,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 12.5%;
             flex-basis: 12.5%;
+            display: flex;
           }
         }
 
@@ -121,6 +131,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 16.666666666666668%;
             flex-basis: 16.666666666666668%;
+            display: flex;
           }
         }
 
@@ -129,6 +140,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 20.833333333333336%;
             flex-basis: 20.833333333333336%;
+            display: flex;
           }
         }
       </style></div>"
@@ -159,6 +171,7 @@ exports[`Grid css value should be passed through 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -166,6 +179,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -174,6 +188,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -182,6 +197,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -190,6 +206,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -198,6 +215,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div><style>
@@ -224,6 +242,7 @@ exports[`Grid css value should be passed through 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -231,6 +250,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -239,6 +259,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -247,6 +268,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -255,6 +277,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -263,6 +286,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div>"
@@ -293,6 +317,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -300,6 +325,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -308,6 +334,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -316,6 +343,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -324,6 +352,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -332,6 +361,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div><style>
@@ -358,6 +388,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -365,6 +396,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -373,6 +405,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -381,6 +414,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -389,6 +423,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -397,6 +432,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div>"
@@ -427,6 +463,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -434,6 +471,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -442,6 +480,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -450,6 +489,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -458,6 +498,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -466,6 +507,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div><div class=\\"item  mock \\"><div class=\\"item  mock \\">test<style>
@@ -492,6 +534,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -499,6 +542,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -507,6 +551,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -515,6 +560,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -523,6 +569,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -531,6 +578,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div><div class=\\"item  mock \\"><div class=\\"item  mock \\">test<style>
@@ -557,6 +605,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -564,6 +613,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -572,6 +622,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -580,6 +631,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -588,6 +640,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -596,6 +649,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div><div class=\\"item  mock \\"><div class=\\"item  mock \\">test<style>
@@ -622,6 +676,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -629,6 +684,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -637,6 +693,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -645,6 +702,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -653,6 +711,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -661,6 +720,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div><style>
@@ -687,6 +747,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -694,6 +755,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -702,6 +764,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -710,6 +773,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -718,6 +782,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -726,6 +791,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div>,<style>
@@ -752,6 +818,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -759,6 +826,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -767,6 +835,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -775,6 +844,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -783,6 +853,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -791,6 +862,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div>,<style>
@@ -817,6 +889,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -824,6 +897,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -832,6 +906,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -840,6 +915,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -848,6 +924,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -856,6 +933,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div>,<style>
@@ -882,6 +960,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -889,6 +968,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -897,6 +977,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -905,6 +986,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -913,6 +995,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -921,6 +1004,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div>"
@@ -951,6 +1035,7 @@ exports[`Grid should render correctly 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -958,6 +1043,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -966,6 +1052,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -974,6 +1061,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -982,6 +1070,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -990,6 +1079,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div><div class=\\"item  mock \\">test<style>
@@ -1016,6 +1106,7 @@ exports[`Grid should render correctly 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -1023,6 +1114,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1031,6 +1123,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1039,6 +1132,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1047,6 +1141,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1055,6 +1150,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div><style>
@@ -1081,6 +1177,7 @@ exports[`Grid should render correctly 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -1088,6 +1185,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1096,6 +1194,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1104,6 +1203,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1112,6 +1212,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1120,6 +1221,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div>"
@@ -1150,6 +1252,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
           flex-grow: 0;
           max-width: 100%;
           flex-basis: 100%;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -1157,6 +1260,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 0;
             max-width: 100%;
             flex-basis: 100%;
+            display: flex;
           }
         }
 
@@ -1165,6 +1269,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1173,6 +1278,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1181,6 +1287,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1189,6 +1296,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div><div class=\\"item xs mock \\">test<style>
@@ -1215,6 +1323,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
           flex-grow: 0;
           max-width: 0;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -1222,6 +1331,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 0;
             max-width: 0;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1230,6 +1340,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1238,6 +1349,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1246,6 +1358,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1254,6 +1367,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div><style>
@@ -1280,6 +1394,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
+          display: flex;
         }
 
         @media only screen and (max-width: 650px) {
@@ -1287,6 +1402,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1295,6 +1411,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1303,6 +1420,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1311,6 +1429,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
 
@@ -1319,6 +1438,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
+            display: flex;
           }
         }
       </style></div>"
diff --git a/components/grid/__tests__/index.test.tsx b/components/grid/__tests__/index.test.tsx
index 72250d0..f40b00a 100644
--- a/components/grid/__tests__/index.test.tsx
+++ b/components/grid/__tests__/index.test.tsx
@@ -111,4 +111,10 @@ describe('Grid', () => {
     expect(wrapper.html()).toMatchSnapshot()
     expect(() => wrapper.unmount()).not.toThrow()
   })
+
+  it('Grid should be hidden when value is 0', () => {
+    let wrapper = mount(<Grid.Container xs={0} />)
+    expect(wrapper.find('.item').hasClass('xs')).toBeTruthy()
+    expect(wrapper.find('.item').html()).toContain('display: none')
+  })
 })