diff --git a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
index 902f65cfd5..441f59fc6e 100644
--- a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -243,6 +243,40 @@ Array [
col-4
,
+
+
+ sub-element align evenly
+
+
,
+
+
+ col-4
+
+
+ col-4
+
+
+ col-4
+
+
+ col-4
+
+
,
]
`;
diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap
index 4e9428a144..de51051625 100644
--- a/components/grid/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/grid/__tests__/__snapshots__/demo.test.js.snap
@@ -243,6 +243,40 @@ Array [
col-4
,
+
+
+ sub-element align evenly
+
+
,
+
+
+ col-4
+
+
+ col-4
+
+
+ col-4
+
+
+ col-4
+
+
,
]
`;
diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md
index 422916fcc9..4e3f6caedb 100644
--- a/components/grid/demo/flex.md
+++ b/components/grid/demo/flex.md
@@ -9,11 +9,11 @@ title:
布局基础。
-子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`,分别定义其在父节点里面的排版方式。
+子元素根据不同的值 `start`、`center`、`end`、`space-between`、`space-around` 和 `space-evenly`,分别定义其在父节点里面的排版方式。
## en-US
-Child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node typesetting mode.
+Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode.
```jsx
import { Row, Col, Divider } from 'antd';
@@ -59,6 +59,14 @@ ReactDOM.render(
col-4
col-4
+
+ sub-element align evenly
+
+ col-4
+ col-4
+ col-4
+ col-4
+
>,
mountNode,
);
diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
index d7644285ef..7192292433 100644
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@@ -91,7 +91,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th
| --- | --- | --- | --- | --- |
| align | Vertical alignment | `top` \| `middle` \| `bottom` | `top` | |
| gutter | Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \| object \| array | 0 | |
-| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | |
+| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | `start` | |
| wrap | Auto wrap line | boolean | true | 4.8.0 |
### Col
diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md
index 58b83047ca..b20ac449b8 100644
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -90,7 +90,7 @@ Ant Design 的布局组件若不能满足你的需求,你也可以直接使用
| --- | --- | --- | --- | --- |
| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` | |
| gutter | 栅格间隔,可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 | |
-| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | |
+| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | `start` | |
| wrap | 是否自动换行 | boolean | true | 4.8.0 |
### Col
diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index c154f50489..b5cc2a5939 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -11,7 +11,7 @@ import ResponsiveObserve, {
import useFlexGapSupport from '../_util/hooks/useFlexGapSupport';
const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
-const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between');
+const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');
export type Gutter = number | Partial>;
export interface RowProps extends React.HTMLAttributes {
diff --git a/components/grid/style/index.less b/components/grid/style/index.less
index 1369f0035c..3dcb534789 100644
--- a/components/grid/style/index.less
+++ b/components/grid/style/index.less
@@ -43,6 +43,11 @@
justify-content: space-around;
}
+// x轴有间隔地均分
+.@{row-prefix-cls}-space-evenly {
+ justify-content: space-evenly;
+}
+
// 顶部对齐
.@{row-prefix-cls}-top {
align-items: flex-start;