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

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
+            <Item>
-              key="1/.0"
-            >
               <li
                 className="ant-list-item"
               >
                 ant design
               </li>
             </Item>
-            <Item
+            <Item>
-              key="2/.1"
-            >
               <li
                 className="ant-list-item"
               >
                 ant design
               </li>
             </Item>
-            <Item
+            <Item>
-              key="3/.2"
-            >
               <li
                 className="ant-list-item"
               >
@@ -170,27 +164,21 @@ exports[`List Item Layout rowKey could be string 1`] = `
           <ul
             className="ant-list-items"
           >
-            <Item
+            <Item>
-              key="1/.0"
-            >
               <li
                 className="ant-list-item"
               >
                 ant design
               </li>
             </Item>
-            <Item
+            <Item>
-              key="2/.1"
-            >
               <li
                 className="ant-list-item"
               >
                 ant design
               </li>
             </Item>
-            <Item
+            <Item>
-              key="3/.2"
-            >
               <li
                 className="ant-list-item"
               >

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,
+);
+```

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) =>
+    const childrenList = React.Children.map(items, (child: any, index) => (
-      cloneElement(
+      <div key={keys[index]} style={colStyle}>
-        child,
+        {child}
-        grid
+      </div>
-          ? {
+    ));
-              key: keys[index],
-              colStyle,
-            }
-          : {
-              key: keys[index],
-            },
-      ),
-    );
     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);