fix(Grid): Row justify setting space-evenly does not work (#41679)

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');
+  });
 });

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',