From bebc05196db3097f620290a0b587d6ccfa6cf8b9 Mon Sep 17 00:00:00 2001
From: JiaQi <112228030+Yuiai01@users.noreply.github.com>
Date: Thu, 6 Apr 2023 19:43:32 +0800
Subject: [PATCH] fix(Grid): Row justify setting space-evenly does not work
 (#41679)

---
 components/grid/__tests__/index.test.tsx | 15 ++++++++++++++-
 components/grid/style/index.ts           |  6 +++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/components/grid/__tests__/index.test.tsx b/components/grid/__tests__/index.test.tsx
index 96d3b33a9a..e514b29104 100644
--- a/components/grid/__tests__/index.test.tsx
+++ b/components/grid/__tests__/index.test.tsx
@@ -3,8 +3,8 @@ import { act } from 'react-dom/test-utils';
 import { Col, Row } from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import { fireEvent, render } from '../../../tests/utils';
 import useBreakpoint from '../hooks/useBreakpoint';
-import { render, fireEvent } from '../../../tests/utils';
 
 // Mock for `responsiveObserve` to test `unsubscribe` call
 jest.mock('../../_util/responsiveObserver', () => {
@@ -232,4 +232,17 @@ describe('Grid', () => {
     });
     expect(container.innerHTML).toContain('ant-row-end');
   });
+
+  it('The column spacing should be evenly spaced', () => {
+    const { container } = render(
+      <Row justify="space-evenly">
+        <Col span={4}>col-1</Col>
+        <Col span={4}>col-2</Col>
+      </Row>,
+    );
+
+    const row = container.querySelector('.ant-row-space-evenly');
+    expect(row).toBeTruthy();
+    expect(row && getComputedStyle(row).justifyContent).toEqual('space-evenly');
+  });
 });
diff --git a/components/grid/style/index.ts b/components/grid/style/index.ts
index acf975c36f..1772f59e8f 100644
--- a/components/grid/style/index.ts
+++ b/components/grid/style/index.ts
@@ -46,10 +46,14 @@ const genGridRowStyle: GenerateStyle<GridRowToken> = (token): CSSObject => {
         justifyContent: 'space-between',
       },
 
-      '&-space-around ': {
+      '&-space-around': {
         justifyContent: 'space-around',
       },
 
+      '&-space-evenly': {
+        justifyContent: 'space-evenly',
+      },
+
       // Align at the top
       '&-top': {
         alignItems: 'flex-start',