From 31a9fffeac43d4981330d593f8982f6d8370a6cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Fri, 12 Jun 2020 18:11:29 +0800
Subject: [PATCH] fix: List grid not working in React.Fragment or wrapped
 List.Item (#24955)

* fix: List grid not working for Fragment or wrapping List.Item

close #24553
close #24828

* remove unused code

* no need extra wrap div for List without grid prop
---
 .../__tests__/__snapshots__/Item.test.js.snap |   24 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 1004 ++++++++++++++---
 components/list/demo/grid-test.md             |   78 ++
 components/list/index.tsx                     |   21 +-
 4 files changed, 952 insertions(+), 175 deletions(-)
 create mode 100644 components/list/demo/grid-test.md

diff --git a/components/list/__tests__/__snapshots__/Item.test.js.snap b/components/list/__tests__/__snapshots__/Item.test.js.snap
index 52159b43d5..1c4323d456 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 a0b5a51c2e..b5bd14b70b 100644
--- a/components/list/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/list/__tests__/__snapshots__/demo.test.js.snap
@@ -182,125 +182,141 @@ 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>
-              <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;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 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;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 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;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 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>
@@ -311,6 +327,698 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
 </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-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 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 ant-card-bordered"
+                >
+                  <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
+            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 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-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
+            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-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
+    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`] = `
 <div
   class="demo-infinite-container"
@@ -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 0000000000..c004406fc4
--- /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 541e82abb3..1fd83546ee 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);