diff --git a/components/list/__tests__/__snapshots__/Item.test.js.snap b/components/list/__tests__/__snapshots__/Item.test.js.snap
index 52159b43d5eb..1c4323d4566d 100644
--- a/components/list/__tests__/__snapshots__/Item.test.js.snap
+++ b/components/list/__tests__/__snapshots__/Item.test.js.snap
@@ -96,27 +96,21 @@ exports[`List Item Layout rowKey could be function 1`] = `
           <ul
             className="ant-list-items"
           >
-            <Item
-              key="1/.0"
-            >
+            <Item>
               <li
                 className="ant-list-item"
               >
                 ant design
               </li>
             </Item>
-            <Item
-              key="2/.1"
-            >
+            <Item>
               <li
                 className="ant-list-item"
               >
                 ant design
               </li>
             </Item>
-            <Item
-              key="3/.2"
-            >
+            <Item>
               <li
                 className="ant-list-item"
               >
@@ -170,27 +164,21 @@ exports[`List Item Layout rowKey could be string 1`] = `
           <ul
             className="ant-list-items"
           >
-            <Item
-              key="1/.0"
-            >
+            <Item>
               <li
                 className="ant-list-item"
               >
                 ant design
               </li>
             </Item>
-            <Item
-              key="2/.1"
-            >
+            <Item>
               <li
                 className="ant-list-item"
               >
                 ant design
               </li>
             </Item>
-            <Item
-              key="3/.2"
-            >
+            <Item>
               <li
                 className="ant-list-item"
               >
diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap
index a0b5a51c2e16..b5bd14b70b86 100644
--- a/components/list/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/list/__tests__/__snapshots__/demo.test.js.snap
@@ -182,133 +182,841 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
         style="margin-left:-8px;margin-right:-8px"
       >
         <div
-          class="ant-col"
-          style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
+          style="width:25%;max-width:25%"
         >
           <div
-            class="ant-list-item"
+            class="ant-col"
+            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
-              class="ant-card ant-card-bordered"
+              class="ant-list-item"
             >
               <div
-                class="ant-card-head"
+                class="ant-card ant-card-bordered"
               >
                 <div
-                  class="ant-card-head-wrapper"
+                  class="ant-card-head"
                 >
                   <div
-                    class="ant-card-head-title"
+                    class="ant-card-head-wrapper"
                   >
-                    Title 1
+                    <div
+                      class="ant-card-head-title"
+                    >
+                      Title 1
+                    </div>
                   </div>
                 </div>
+                <div
+                  class="ant-card-body"
+                >
+                  Card content
+                </div>
               </div>
+            </div>
+          </div>
+        </div>
+        <div
+          style="width:25%;max-width:25%"
+        >
+          <div
+            class="ant-col"
+            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+          >
+            <div
+              class="ant-list-item"
+            >
               <div
-                class="ant-card-body"
+                class="ant-card ant-card-bordered"
               >
-                Card content
+                <div
+                  class="ant-card-head"
+                >
+                  <div
+                    class="ant-card-head-wrapper"
+                  >
+                    <div
+                      class="ant-card-head-title"
+                    >
+                      Title 2
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ant-card-body"
+                >
+                  Card content
+                </div>
               </div>
             </div>
           </div>
         </div>
         <div
-          class="ant-col"
-          style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
+          style="width:25%;max-width:25%"
         >
           <div
-            class="ant-list-item"
+            class="ant-col"
+            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
-              class="ant-card ant-card-bordered"
+              class="ant-list-item"
             >
               <div
-                class="ant-card-head"
+                class="ant-card ant-card-bordered"
               >
                 <div
-                  class="ant-card-head-wrapper"
+                  class="ant-card-head"
                 >
                   <div
-                    class="ant-card-head-title"
+                    class="ant-card-head-wrapper"
                   >
-                    Title 2
+                    <div
+                      class="ant-card-head-title"
+                    >
+                      Title 3
+                    </div>
                   </div>
                 </div>
+                <div
+                  class="ant-card-body"
+                >
+                  Card content
+                </div>
               </div>
+            </div>
+          </div>
+        </div>
+        <div
+          style="width:25%;max-width:25%"
+        >
+          <div
+            class="ant-col"
+            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+          >
+            <div
+              class="ant-list-item"
+            >
               <div
-                class="ant-card-body"
+                class="ant-card ant-card-bordered"
               >
-                Card content
+                <div
+                  class="ant-card-head"
+                >
+                  <div
+                    class="ant-card-head-wrapper"
+                  >
+                    <div
+                      class="ant-card-head-title"
+                    >
+                      Title 4
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ant-card-body"
+                >
+                  Card content
+                </div>
               </div>
             </div>
           </div>
         </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/list/demo/grid-test.md correctly 1`] = `
+Array [
+  <div
+    class="ant-list ant-list-split ant-list-grid"
+  >
+    <div
+      class="ant-spin-nested-loading"
+    >
+      <div
+        class="ant-spin-container"
+      >
         <div
-          class="ant-col"
-          style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
+          class="ant-row"
+          style="margin-left:-8px;margin-right:-8px"
         >
           <div
-            class="ant-list-item"
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        Title 1
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            style="width:25%;max-width:25%"
           >
             <div
-              class="ant-card ant-card-bordered"
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
-                class="ant-card-head"
+                class="ant-list-item"
               >
                 <div
-                  class="ant-card-head-wrapper"
+                  class="ant-card ant-card-bordered"
                 >
                   <div
-                    class="ant-card-head-title"
+                    class="ant-card-head"
                   >
-                    Title 3
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        Title 2
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
                   </div>
                 </div>
               </div>
+            </div>
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
               <div
-                class="ant-card-body"
+                class="ant-list-item"
               >
-                Card content
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        Title 3
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        Title 4
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        Title 5
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        Title 6
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-list ant-list-split ant-list-grid"
+  >
+    <div
+      class="ant-spin-nested-loading"
+    >
+      <div
+        class="ant-spin-container"
+      >
         <div
-          class="ant-col"
-          style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
+          class="ant-row"
+          style="margin-left:-8px;margin-right:-8px"
         >
           <div
-            class="ant-list-item"
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        title
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        title
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        title
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        title
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            style="width:25%;max-width:25%"
           >
             <div
-              class="ant-card ant-card-bordered"
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
-                class="ant-card-head"
+                class="ant-list-item"
               >
                 <div
-                  class="ant-card-head-wrapper"
+                  class="ant-card ant-card-bordered"
                 >
                   <div
-                    class="ant-card-head-title"
+                    class="ant-card-head"
                   >
-                    Title 4
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        title
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
                   </div>
                 </div>
               </div>
+            </div>
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
               <div
-                class="ant-card-body"
+                class="ant-list-item"
               >
-                Card content
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        title
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-</div>
+  </div>,
+  <div
+    class="ant-list ant-list-split ant-list-grid"
+  >
+    <div
+      class="ant-spin-nested-loading"
+    >
+      <div
+        class="ant-spin-container"
+      >
+        <div
+          class="ant-row"
+          style="margin-left:-8px;margin-right:-8px"
+        >
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        title
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div />
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        title
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div />
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        title
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div />
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        title
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div />
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        title
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div />
+          </div>
+          <div
+            style="width:25%;max-width:25%"
+          >
+            <div
+              class="ant-col"
+              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            >
+              <div
+                class="ant-list-item"
+              >
+                <div
+                  class="ant-card ant-card-bordered"
+                >
+                  <div
+                    class="ant-card-head"
+                  >
+                    <div
+                      class="ant-card-head-wrapper"
+                    >
+                      <div
+                        class="ant-card-head-title"
+                      >
+                        title
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-card-body"
+                  >
+                    Card content
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
@@ -450,188 +1158,200 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
         class="ant-row"
         style="margin-left:-8px;margin-right:-8px"
       >
-        <div
-          class="ant-col"
-          style="padding-left:8px;padding-right:8px;flex:1 1 auto"
-        >
+        <div>
           <div
-            class="ant-list-item"
+            class="ant-col"
+            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
-              class="ant-card ant-card-bordered"
+              class="ant-list-item"
             >
               <div
-                class="ant-card-head"
+                class="ant-card ant-card-bordered"
               >
                 <div
-                  class="ant-card-head-wrapper"
+                  class="ant-card-head"
                 >
                   <div
-                    class="ant-card-head-title"
+                    class="ant-card-head-wrapper"
                   >
-                    Title 1
+                    <div
+                      class="ant-card-head-title"
+                    >
+                      Title 1
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="ant-card-body"
-              >
-                Card content
+                <div
+                  class="ant-card-body"
+                >
+                  Card content
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div
-          class="ant-col"
-          style="padding-left:8px;padding-right:8px;flex:1 1 auto"
-        >
+        <div>
           <div
-            class="ant-list-item"
+            class="ant-col"
+            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
-              class="ant-card ant-card-bordered"
+              class="ant-list-item"
             >
               <div
-                class="ant-card-head"
+                class="ant-card ant-card-bordered"
               >
                 <div
-                  class="ant-card-head-wrapper"
+                  class="ant-card-head"
                 >
                   <div
-                    class="ant-card-head-title"
+                    class="ant-card-head-wrapper"
                   >
-                    Title 2
+                    <div
+                      class="ant-card-head-title"
+                    >
+                      Title 2
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="ant-card-body"
-              >
-                Card content
+                <div
+                  class="ant-card-body"
+                >
+                  Card content
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div
-          class="ant-col"
-          style="padding-left:8px;padding-right:8px;flex:1 1 auto"
-        >
+        <div>
           <div
-            class="ant-list-item"
+            class="ant-col"
+            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
-              class="ant-card ant-card-bordered"
+              class="ant-list-item"
             >
               <div
-                class="ant-card-head"
+                class="ant-card ant-card-bordered"
               >
                 <div
-                  class="ant-card-head-wrapper"
+                  class="ant-card-head"
                 >
                   <div
-                    class="ant-card-head-title"
+                    class="ant-card-head-wrapper"
                   >
-                    Title 3
+                    <div
+                      class="ant-card-head-title"
+                    >
+                      Title 3
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="ant-card-body"
-              >
-                Card content
+                <div
+                  class="ant-card-body"
+                >
+                  Card content
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div
-          class="ant-col"
-          style="padding-left:8px;padding-right:8px;flex:1 1 auto"
-        >
+        <div>
           <div
-            class="ant-list-item"
+            class="ant-col"
+            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
-              class="ant-card ant-card-bordered"
+              class="ant-list-item"
             >
               <div
-                class="ant-card-head"
+                class="ant-card ant-card-bordered"
               >
                 <div
-                  class="ant-card-head-wrapper"
+                  class="ant-card-head"
                 >
                   <div
-                    class="ant-card-head-title"
+                    class="ant-card-head-wrapper"
                   >
-                    Title 4
+                    <div
+                      class="ant-card-head-title"
+                    >
+                      Title 4
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="ant-card-body"
-              >
-                Card content
+                <div
+                  class="ant-card-body"
+                >
+                  Card content
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div
-          class="ant-col"
-          style="padding-left:8px;padding-right:8px;flex:1 1 auto"
-        >
+        <div>
           <div
-            class="ant-list-item"
+            class="ant-col"
+            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
-              class="ant-card ant-card-bordered"
+              class="ant-list-item"
             >
               <div
-                class="ant-card-head"
+                class="ant-card ant-card-bordered"
               >
                 <div
-                  class="ant-card-head-wrapper"
+                  class="ant-card-head"
                 >
                   <div
-                    class="ant-card-head-title"
+                    class="ant-card-head-wrapper"
                   >
-                    Title 5
+                    <div
+                      class="ant-card-head-title"
+                    >
+                      Title 5
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="ant-card-body"
-              >
-                Card content
+                <div
+                  class="ant-card-body"
+                >
+                  Card content
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div
-          class="ant-col"
-          style="padding-left:8px;padding-right:8px;flex:1 1 auto"
-        >
+        <div>
           <div
-            class="ant-list-item"
+            class="ant-col"
+            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
-              class="ant-card ant-card-bordered"
+              class="ant-list-item"
             >
               <div
-                class="ant-card-head"
+                class="ant-card ant-card-bordered"
               >
                 <div
-                  class="ant-card-head-wrapper"
+                  class="ant-card-head"
                 >
                   <div
-                    class="ant-card-head-title"
+                    class="ant-card-head-wrapper"
                   >
-                    Title 6
+                    <div
+                      class="ant-card-head-title"
+                    >
+                      Title 6
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="ant-card-body"
-              >
-                Card content
+                <div
+                  class="ant-card-body"
+                >
+                  Card content
+                </div>
               </div>
             </div>
           </div>
diff --git a/components/list/demo/grid-test.md b/components/list/demo/grid-test.md
new file mode 100644
index 000000000000..c004406fc40b
--- /dev/null
+++ b/components/list/demo/grid-test.md
@@ -0,0 +1,78 @@
+---
+order: 4.1
+title:
+  zh-CN: 测试栅格列表
+  en-US: Test Grid
+debug: true
+---
+
+## zh-CN
+
+List `grid` 在各种情况下的样式表现，如 Fragment 和封装了 List.Item.
+
+## en-US
+
+Test List `grid` for some edge cases.
+
+```jsx
+import { List, Card } from 'antd';
+
+const data = [
+  {
+    title: 'Title 1',
+  },
+  {
+    title: 'Title 2',
+  },
+  {
+    title: 'Title 3',
+  },
+  {
+    title: 'Title 4',
+  },
+  {
+    title: 'Title 5',
+  },
+    {
+    title: 'Title 6',
+  },
+];
+
+const ListItem = () => (
+  <List.Item>
+    <Card title="title">Card content</Card>
+  </List.Item>
+);
+
+ReactDOM.render(
+  <>
+    <List
+      grid={{ gutter: 16, column: 4 }}
+      dataSource={data}
+      renderItem={item => (
+        <>
+          <List.Item>
+            <Card title={item.title}>Card content</Card>
+          </List.Item>
+        </>
+      )}
+    />
+    <List
+      grid={{ gutter: 16, column: 4 }}
+      dataSource={data}
+      renderItem={() => <ListItem />}
+    />
+    <List
+      grid={{ gutter: 16, column: 4 }}
+      dataSource={data}
+      renderItem={() => (
+        <>
+          <ListItem />
+          <div />
+        </>
+      )}
+    />
+  </>,
+  mountNode,
+);
+```
diff --git a/components/list/index.tsx b/components/list/index.tsx
index 541e82abb329..1fd83546ee5b 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -7,7 +7,6 @@ import { RenderEmptyHandler, ConfigContext } from '../config-provider';
 import Pagination, { PaginationConfig } from '../pagination';
 import { Row } from '../grid';
 import Item from './Item';
-import { cloneElement } from '../_util/reactNode';
 
 export { ListItemProps, ListItemMetaProps } from './Item';
 
@@ -249,23 +248,15 @@ function List<T>({
   let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
   if (splitDataSource.length > 0) {
     const items = splitDataSource.map((item: any, index: number) => renderInnerItem(item, index));
-    const childrenList = React.Children.map(items, (child: any, index) =>
-      cloneElement(
-        child,
-        grid
-          ? {
-              key: keys[index],
-              colStyle,
-            }
-          : {
-              key: keys[index],
-            },
-      ),
-    );
+    const childrenList = React.Children.map(items, (child: any, index) => (
+      <div key={keys[index]} style={colStyle}>
+        {child}
+      </div>
+    ));
     childrenContent = grid ? (
       <Row gutter={grid.gutter}>{childrenList}</Row>
     ) : (
-      <ul className={`${prefixCls}-items`}>{childrenList}</ul>
+      <ul className={`${prefixCls}-items`}>{items}</ul>
     );
   } else if (!children && !isLoading) {
     childrenContent = renderEmptyFunc(prefixCls, renderEmpty);