From 78ee8c1c33460f1c98f9f2c7989fb6c0d4e61cac Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Wed, 5 Oct 2022 10:32:57 +0800
Subject: [PATCH 01/15] feat: row's 'align' and 'justify' support reponsive
 value

---
 components/grid/__tests__/index.test.tsx | 48 ++++++++++++++++
 components/grid/index.zh-CN.md           |  6 +-
 components/grid/row.tsx                  | 73 ++++++++++++++++++++++--
 3 files changed, 120 insertions(+), 7 deletions(-)

diff --git a/components/grid/__tests__/index.test.tsx b/components/grid/__tests__/index.test.tsx
index 466f33e9d492..89711ff6ac0d 100644
--- a/components/grid/__tests__/index.test.tsx
+++ b/components/grid/__tests__/index.test.tsx
@@ -143,4 +143,52 @@ describe('Grid', () => {
       xxl: false,
     });
   });
+
+  it('should align by responsive align prop', () => {
+    const matchMediaSpy = jest.spyOn(window, 'matchMedia');
+    matchMediaSpy.mockImplementation(
+      query =>
+        ({
+          addListener: (cb: (e: { matches: boolean }) => void) => {
+            cb({ matches: query === '(max-width: 575px)' });
+          },
+          removeListener: jest.fn(),
+          matches: query === '(max-width: 575px)',
+        } as any),
+    );
+    const { container } = render(<Row align="middle" />);
+    expect(container.innerHTML).toContain('ant-row-middle');
+    const { container: container2 } = render(<Row align={{ xs: 'middle' }} />);
+    expect(container2.innerHTML).toContain('ant-row-middle');
+    const { container: container3 } = render(<Row align={{ lg: 'middle' }} />);
+    expect(container3.innerHTML).not.toContain('ant-row-middle');
+    const { container: container4 } = render(<Row align={{ lg: 'middle', other: 'bottom' }} />);
+    expect(container4.innerHTML).toContain('ant-row-bottom');
+    const { container: container5 } = render(<Row align={{ xs: 'middle', other: 'bottom' }} />);
+    expect(container5.innerHTML).toContain('ant-row-middle');
+  });
+
+  it('should justify by responsive justify prop', () => {
+    const matchMediaSpy = jest.spyOn(window, 'matchMedia');
+    matchMediaSpy.mockImplementation(
+      query =>
+        ({
+          addListener: (cb: (e: { matches: boolean }) => void) => {
+            cb({ matches: query === '(max-width: 575px)' });
+          },
+          removeListener: jest.fn(),
+          matches: query === '(max-width: 575px)',
+        } as any),
+    );
+    const { container } = render(<Row justify="center" />);
+    expect(container.innerHTML).toContain('ant-row-center');
+    const { container: container2 } = render(<Row justify={{ xs: 'center' }} />);
+    expect(container2.innerHTML).toContain('ant-row-center');
+    const { container: container3 } = render(<Row justify={{ lg: 'center' }} />);
+    expect(container3.innerHTML).not.toContain('ant-row-center');
+    const { container: container4 } = render(<Row justify={{ lg: 'center', other: 'end' }} />);
+    expect(container4.innerHTML).toContain('ant-row-end');
+    const { container: container5 } = render(<Row justify={{ xs: 'center', other: 'end' }} />);
+    expect(container5.innerHTML).toContain('ant-row-center');
+  });
 });
diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md
index e8ed5b41ac04..1e0f893d2a84 100644
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -42,10 +42,10 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 ### Row
 
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` |  |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'other']: 'top' | 'middle' | 'bottom' | 'stretch'}` | `top` |  |
 | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 |  |
-| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | `start` |  |
+| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'other']: '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 1457dfcfd0ff..a6ccddd6b616 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -10,12 +10,17 @@ import RowContext from './RowContext';
 const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
 const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');
 
+type Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'other';
+type ResponsiveLike<T> = {
+  [key in Responsive]?: T;
+};
+
 type Gap = number | undefined;
 export type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
   gutter?: Gutter | [Gutter, Gutter];
-  align?: typeof RowAligns[number];
-  justify?: typeof RowJustify[number];
+  align?: typeof RowAligns[number] | ResponsiveLike<typeof RowAligns[number]>;
+  justify?: typeof RowJustify[number] | ResponsiveLike<typeof RowJustify[number]>;
   prefixCls?: string;
   wrap?: boolean;
 }
@@ -43,6 +48,18 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     xl: true,
     xxl: true,
   });
+  // to save screens info when responsiveObserve callback had been call
+  const [curScreens, setCurScreens] = React.useState<ScreenMap>({
+    xs: false,
+    sm: false,
+    md: false,
+    lg: false,
+    xl: false,
+    xxl: false,
+  });
+
+  const [mergeAlign, setMergeAlign] = React.useState(typeof align === 'string' ? align : '');
+  const [mergeJustify, setJustify] = React.useState(typeof justify === 'string' ? justify : '');
 
   const supportFlexGap = useFlexGapSupport();
 
@@ -51,6 +68,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   // ================================== Effect ==================================
   React.useEffect(() => {
     const token = ResponsiveObserve.subscribe(screen => {
+      setCurScreens(screen);
       const currentGutter = gutterRef.current || 0;
       if (
         (!Array.isArray(currentGutter) && typeof currentGutter === 'object') ||
@@ -83,14 +101,53 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     return results;
   };
 
+  // ================================== calc reponsive data ==================================
+  const clacMergeAlign = () => {
+    if (typeof align === 'object') {
+      for (let i = 0; i < responsiveArray.length; i++) {
+        const breakpoint: Breakpoint = responsiveArray[i];
+        // When 'align' sets the 'other' attribute,
+        // we need to set the value of the response attribute not explicitly set in 'align' to the value of 'other'
+        const curAlign = align[breakpoint];
+        if (align.other && !curScreens[breakpoint]) {
+          const otherVal = align.other;
+          if (!align[breakpoint]) {
+            setMergeAlign(otherVal);
+          }
+        } else if (curScreens[breakpoint] && curAlign !== undefined) {
+          setMergeAlign(curAlign!);
+        }
+      }
+    }
+  };
+
+  const clacMergeJustify = () => {
+    if (typeof justify === 'object') {
+      for (let i = 0; i < responsiveArray.length; i++) {
+        const breakpoint: Breakpoint = responsiveArray[i];
+        // When 'justify' sets the 'other' attribute,
+        // we need to set the value of the response attribute not explicitly set in 'justify' to the value of 'other'
+        const curJustify = justify[breakpoint];
+        if (justify.other && !curScreens[breakpoint]) {
+          const otherVal = justify.other;
+          if (!justify[breakpoint]) {
+            setMergeAlign(otherVal);
+          }
+        } else if (curScreens[breakpoint] && curJustify !== undefined) {
+          setJustify(curJustify);
+        }
+      }
+    }
+  };
+
   const prefixCls = getPrefixCls('row', customizePrefixCls);
   const gutters = getGutter();
   const classes = classNames(
     prefixCls,
     {
       [`${prefixCls}-no-wrap`]: wrap === false,
-      [`${prefixCls}-${justify}`]: justify,
-      [`${prefixCls}-${align}`]: align,
+      [`${prefixCls}-${mergeJustify}`]: mergeJustify,
+      [`${prefixCls}-${mergeAlign}`]: mergeAlign,
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     className,
@@ -122,6 +179,14 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     [gutterH, gutterV, wrap, supportFlexGap],
   );
 
+  React.useEffect(() => {
+    clacMergeAlign();
+  }, [align, curScreens]);
+
+  React.useEffect(() => {
+    clacMergeJustify();
+  }, [justify, curScreens]);
+
   return (
     <RowContext.Provider value={rowContext}>
       <div {...others} className={classes} style={{ ...rowStyle, ...style }} ref={ref}>

From b56a902a9facbe36e8e677dd1fdc0a8a1ce15e95 Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Sun, 9 Oct 2022 12:01:34 +0800
Subject: [PATCH 02/15] refactor: refactor code

---
 components/grid/row.tsx | 69 ++++++++++++++++-------------------------
 1 file changed, 27 insertions(+), 42 deletions(-)

diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index a6ccddd6b616..fcf131fd49a0 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -17,10 +17,13 @@ type ResponsiveLike<T> = {
 
 type Gap = number | undefined;
 export type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;
+
+type ResponsiveAligns = ResponsiveLike<typeof RowAligns[number]>;
+type ResponsiveJustify = ResponsiveLike<typeof RowJustify[number]>;
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
   gutter?: Gutter | [Gutter, Gutter];
-  align?: typeof RowAligns[number] | ResponsiveLike<typeof RowAligns[number]>;
-  justify?: typeof RowJustify[number] | ResponsiveLike<typeof RowJustify[number]>;
+  align?: typeof RowAligns[number] | ResponsiveAligns;
+  justify?: typeof RowJustify[number] | ResponsiveJustify;
   prefixCls?: string;
   wrap?: boolean;
 }
@@ -59,7 +62,9 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   });
 
   const [mergeAlign, setMergeAlign] = React.useState(typeof align === 'string' ? align : '');
-  const [mergeJustify, setJustify] = React.useState(typeof justify === 'string' ? justify : '');
+  const [mergeJustify, setMergeJustify] = React.useState(
+    typeof justify === 'string' ? justify : '',
+  );
 
   const supportFlexGap = useFlexGapSupport();
 
@@ -102,40 +107,24 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   };
 
   // ================================== calc reponsive data ==================================
-  const clacMergeAlign = () => {
-    if (typeof align === 'object') {
-      for (let i = 0; i < responsiveArray.length; i++) {
-        const breakpoint: Breakpoint = responsiveArray[i];
-        // When 'align' sets the 'other' attribute,
-        // we need to set the value of the response attribute not explicitly set in 'align' to the value of 'other'
-        const curAlign = align[breakpoint];
-        if (align.other && !curScreens[breakpoint]) {
-          const otherVal = align.other;
-          if (!align[breakpoint]) {
-            setMergeAlign(otherVal);
-          }
-        } else if (curScreens[breakpoint] && curAlign !== undefined) {
-          setMergeAlign(curAlign!);
-        }
-      }
+  const clacMergeAlignOrJustify = (propName: 'align' | 'justify') => {
+    if (typeof props[propName] !== 'object') {
+      return;
     }
-  };
-
-  const clacMergeJustify = () => {
-    if (typeof justify === 'object') {
-      for (let i = 0; i < responsiveArray.length; i++) {
-        const breakpoint: Breakpoint = responsiveArray[i];
-        // When 'justify' sets the 'other' attribute,
-        // we need to set the value of the response attribute not explicitly set in 'justify' to the value of 'other'
-        const curJustify = justify[breakpoint];
-        if (justify.other && !curScreens[breakpoint]) {
-          const otherVal = justify.other;
-          if (!justify[breakpoint]) {
-            setMergeAlign(otherVal);
-          }
-        } else if (curScreens[breakpoint] && curJustify !== undefined) {
-          setJustify(curJustify);
+    const prop = props[propName] as ResponsiveLike<any>;
+    const updator = propName === 'align' ? setMergeAlign : setMergeJustify;
+    for (let i = 0; i < responsiveArray.length; i++) {
+      const breakpoint: Breakpoint = responsiveArray[i];
+      // When 'align' sets the 'other' attribute,
+      // we need to set the value of the response attribute not explicitly set in 'align' to the value of 'other'
+      const curVal = prop[breakpoint];
+      if (prop.other && !curScreens[breakpoint]) {
+        const otherVal = prop.other;
+        if (!prop[breakpoint]) {
+          updator(otherVal);
         }
+      } else if (curScreens[breakpoint] && curVal !== undefined) {
+        updator(curVal!);
       }
     }
   };
@@ -179,13 +168,9 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     [gutterH, gutterV, wrap, supportFlexGap],
   );
 
-  React.useEffect(() => {
-    clacMergeAlign();
-  }, [align, curScreens]);
-
-  React.useEffect(() => {
-    clacMergeJustify();
-  }, [justify, curScreens]);
+  // re-calc responsive data
+  React.useEffect(() => clacMergeAlignOrJustify('align'), [align, curScreens]);
+  React.useEffect(() => clacMergeAlignOrJustify('justify'), [justify, curScreens]);
 
   return (
     <RowContext.Provider value={rowContext}>

From e8927309230db06d431efff7695f97d3f7e02e97 Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Sun, 9 Oct 2022 12:42:47 +0800
Subject: [PATCH 03/15] refactor: refactor code

---
 components/grid/row.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index fcf131fd49a0..a01e54965301 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -119,12 +119,11 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
       // we need to set the value of the response attribute not explicitly set in 'align' to the value of 'other'
       const curVal = prop[breakpoint];
       if (prop.other && !curScreens[breakpoint]) {
-        const otherVal = prop.other;
-        if (!prop[breakpoint]) {
-          updator(otherVal);
+        if (!curVal) {
+          updator(prop.other);
         }
       } else if (curScreens[breakpoint] && curVal !== undefined) {
-        updator(curVal!);
+        updator(curVal);
       }
     }
   };

From e61c6b9cc1f50e90f310dca8d22698a9a1c60ec4 Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Sun, 9 Oct 2022 13:01:30 +0800
Subject: [PATCH 04/15] refactor: refactor code

---
 components/grid/row.tsx | 79 ++++++++++++++++++++++++++---------------
 1 file changed, 51 insertions(+), 28 deletions(-)

diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index a01e54965301..6ff2922b601e 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -28,6 +28,20 @@ export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
   wrap?: boolean;
 }
 
+function useMergePropByScreen(
+  initValue: string,
+  screen: ScreenMap,
+  cb: (prop: string, setProp: React.Dispatch<React.SetStateAction<string>>) => void,
+) {
+  const [prop, setProp] = React.useState(initValue);
+
+  React.useEffect(() => {
+    cb(prop, setProp);
+  }, [JSON.stringify(prop), screen]);
+
+  return [prop, setProp];
+}
+
 const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   const {
     prefixCls: customizePrefixCls,
@@ -61,9 +75,44 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     xxl: false,
   });
 
-  const [mergeAlign, setMergeAlign] = React.useState(typeof align === 'string' ? align : '');
-  const [mergeJustify, setMergeJustify] = React.useState(
+  // ================================== calc reponsive data ==================================
+  const clacMergeAlignOrJustify = (
+    prop: RowProps['align'] | RowProps['justify'],
+    updator: React.Dispatch<React.SetStateAction<string>>,
+  ) => {
+    if (typeof prop !== 'object') {
+      return;
+    }
+    for (let i = 0; i < responsiveArray.length; i++) {
+      const breakpoint: Breakpoint = responsiveArray[i];
+      // When 'align' sets the 'other' attribute,
+      // we need to set the value of the response attribute not explicitly set in 'align' to the value of 'other'
+      const curVal = prop[breakpoint];
+      if (prop.other && !curScreens[breakpoint]) {
+        if (!curVal) {
+          updator(prop.other);
+        }
+      } else if (curScreens[breakpoint] && curVal !== undefined) {
+        updator(curVal);
+      }
+    }
+  };
+
+  // re-calc responsive data
+  const [mergeAlign] = useMergePropByScreen(
+    typeof align === 'string' ? align : '',
+    curScreens,
+    (_prop, setProp) => {
+      clacMergeAlignOrJustify(align, setProp);
+    },
+  );
+
+  const [mergeJustify] = useMergePropByScreen(
     typeof justify === 'string' ? justify : '',
+    curScreens,
+    (_prop, setProp) => {
+      clacMergeAlignOrJustify(justify, setProp);
+    },
   );
 
   const supportFlexGap = useFlexGapSupport();
@@ -106,28 +155,6 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     return results;
   };
 
-  // ================================== calc reponsive data ==================================
-  const clacMergeAlignOrJustify = (propName: 'align' | 'justify') => {
-    if (typeof props[propName] !== 'object') {
-      return;
-    }
-    const prop = props[propName] as ResponsiveLike<any>;
-    const updator = propName === 'align' ? setMergeAlign : setMergeJustify;
-    for (let i = 0; i < responsiveArray.length; i++) {
-      const breakpoint: Breakpoint = responsiveArray[i];
-      // When 'align' sets the 'other' attribute,
-      // we need to set the value of the response attribute not explicitly set in 'align' to the value of 'other'
-      const curVal = prop[breakpoint];
-      if (prop.other && !curScreens[breakpoint]) {
-        if (!curVal) {
-          updator(prop.other);
-        }
-      } else if (curScreens[breakpoint] && curVal !== undefined) {
-        updator(curVal);
-      }
-    }
-  };
-
   const prefixCls = getPrefixCls('row', customizePrefixCls);
   const gutters = getGutter();
   const classes = classNames(
@@ -167,10 +194,6 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     [gutterH, gutterV, wrap, supportFlexGap],
   );
 
-  // re-calc responsive data
-  React.useEffect(() => clacMergeAlignOrJustify('align'), [align, curScreens]);
-  React.useEffect(() => clacMergeAlignOrJustify('justify'), [justify, curScreens]);
-
   return (
     <RowContext.Provider value={rowContext}>
       <div {...others} className={classes} style={{ ...rowStyle, ...style }} ref={ref}>

From 456c7a16a04b67a59a28785973220cecf1d0786f Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Sun, 9 Oct 2022 13:06:26 +0800
Subject: [PATCH 05/15] refactor: refactor code

---
 components/grid/row.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index 6ff2922b601e..1738c08a7cf5 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -85,14 +85,16 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     }
     for (let i = 0; i < responsiveArray.length; i++) {
       const breakpoint: Breakpoint = responsiveArray[i];
-      // When 'align' sets the 'other' attribute,
-      // we need to set the value of the response attribute not explicitly set in 'align' to the value of 'other'
+      // When 'align' and 'justify' sets the 'other' attribute,
+      // we need to set the value of the response attribute not explicitly set in 'align' adn 'justify'  to the value of 'other'
       const curVal = prop[breakpoint];
       if (prop.other && !curScreens[breakpoint]) {
         if (!curVal) {
           updator(prop.other);
         }
-      } else if (curScreens[breakpoint] && curVal !== undefined) {
+        return;
+      }
+      if (curScreens[breakpoint] && curVal !== undefined) {
         updator(curVal);
       }
     }

From c81f1b0db47c03cd56f3eb354ce5e1b8f9e34518 Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Sun, 9 Oct 2022 13:18:50 +0800
Subject: [PATCH 06/15] refactor: refactor code

---
 components/grid/row.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index 1738c08a7cf5..813ca3084ede 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -85,17 +85,18 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     }
     for (let i = 0; i < responsiveArray.length; i++) {
       const breakpoint: Breakpoint = responsiveArray[i];
+      // if do not match, do nothing
+      if (!curScreens[breakpoint]) continue;
       // When 'align' and 'justify' sets the 'other' attribute,
-      // we need to set the value of the response attribute not explicitly set in 'align' adn 'justify'  to the value of 'other'
+      // we need to set the value of the response attribute not explicitly set in 'align' adn 'justify' to the value of 'other'
       const curVal = prop[breakpoint];
-      if (prop.other && !curScreens[breakpoint]) {
-        if (!curVal) {
-          updator(prop.other);
-        }
+      if (prop.other && !curVal) {
+        updator(prop.other);
         return;
       }
-      if (curScreens[breakpoint] && curVal !== undefined) {
+      if (curVal !== undefined) {
         updator(curVal);
+        return;
       }
     }
   };

From 4e817be9e86b3bf81637bd5d744a3ed3812f3b87 Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Sun, 9 Oct 2022 13:27:14 +0800
Subject: [PATCH 07/15] refactor: refactor code

---
 components/grid/row.tsx | 68 ++++++++++++++++++-----------------------
 1 file changed, 30 insertions(+), 38 deletions(-)

diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index 813ca3084ede..52a972bd8cb9 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -30,16 +30,38 @@ export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
 
 function useMergePropByScreen(
   initValue: string,
+  oriProp: RowProps['align'] | RowProps['justify'],
   screen: ScreenMap,
-  cb: (prop: string, setProp: React.Dispatch<React.SetStateAction<string>>) => void,
 ) {
   const [prop, setProp] = React.useState(initValue);
 
+  const clacMergeAlignOrJustify = () => {
+    if (typeof oriProp !== 'object') {
+      return;
+    }
+    for (let i = 0; i < responsiveArray.length; i++) {
+      const breakpoint: Breakpoint = responsiveArray[i];
+      // if do not match, do nothing
+      if (!screen[breakpoint]) continue;
+      // When 'align' and 'justify' sets the 'other' attribute,
+      // we need to set the value of the response attribute not explicitly set in 'align' adn 'justify' to the value of 'other'
+      const curVal = oriProp[breakpoint];
+      if (oriProp.other && !curVal) {
+        setProp(oriProp.other);
+        return;
+      }
+      if (curVal !== undefined) {
+        setProp(curVal);
+        return;
+      }
+    }
+  };
+
   React.useEffect(() => {
-    cb(prop, setProp);
-  }, [JSON.stringify(prop), screen]);
+    clacMergeAlignOrJustify();
+  }, [JSON.stringify(oriProp), screen]);
 
-  return [prop, setProp];
+  return prop;
 }
 
 const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
@@ -76,46 +98,16 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   });
 
   // ================================== calc reponsive data ==================================
-  const clacMergeAlignOrJustify = (
-    prop: RowProps['align'] | RowProps['justify'],
-    updator: React.Dispatch<React.SetStateAction<string>>,
-  ) => {
-    if (typeof prop !== 'object') {
-      return;
-    }
-    for (let i = 0; i < responsiveArray.length; i++) {
-      const breakpoint: Breakpoint = responsiveArray[i];
-      // if do not match, do nothing
-      if (!curScreens[breakpoint]) continue;
-      // When 'align' and 'justify' sets the 'other' attribute,
-      // we need to set the value of the response attribute not explicitly set in 'align' adn 'justify' to the value of 'other'
-      const curVal = prop[breakpoint];
-      if (prop.other && !curVal) {
-        updator(prop.other);
-        return;
-      }
-      if (curVal !== undefined) {
-        updator(curVal);
-        return;
-      }
-    }
-  };
-
-  // re-calc responsive data
-  const [mergeAlign] = useMergePropByScreen(
+  const mergeAlign = useMergePropByScreen(
     typeof align === 'string' ? align : '',
+    align,
     curScreens,
-    (_prop, setProp) => {
-      clacMergeAlignOrJustify(align, setProp);
-    },
   );
 
-  const [mergeJustify] = useMergePropByScreen(
+  const mergeJustify = useMergePropByScreen(
     typeof justify === 'string' ? justify : '',
+    justify,
     curScreens,
-    (_prop, setProp) => {
-      clacMergeAlignOrJustify(justify, setProp);
-    },
   );
 
   const supportFlexGap = useFlexGapSupport();

From 3fd542d38b798f96297969460e1528bc6cd54726 Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Mon, 10 Oct 2022 11:16:18 +0800
Subject: [PATCH 08/15] refactor: refactor code

---
 components/grid/row.tsx | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index 52a972bd8cb9..ec142892b7f7 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -28,12 +28,8 @@ export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
   wrap?: boolean;
 }
 
-function useMergePropByScreen(
-  initValue: string,
-  oriProp: RowProps['align'] | RowProps['justify'],
-  screen: ScreenMap,
-) {
-  const [prop, setProp] = React.useState(initValue);
+function useMergePropByScreen(oriProp: RowProps['align'] | RowProps['justify'], screen: ScreenMap) {
+  const [prop, setProp] = React.useState(typeof oriProp === 'string' ? oriProp : '');
 
   const clacMergeAlignOrJustify = () => {
     if (typeof oriProp !== 'object') {
@@ -98,17 +94,9 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   });
 
   // ================================== calc reponsive data ==================================
-  const mergeAlign = useMergePropByScreen(
-    typeof align === 'string' ? align : '',
-    align,
-    curScreens,
-  );
+  const mergeAlign = useMergePropByScreen(align, curScreens);
 
-  const mergeJustify = useMergePropByScreen(
-    typeof justify === 'string' ? justify : '',
-    justify,
-    curScreens,
-  );
+  const mergeJustify = useMergePropByScreen(justify, curScreens);
 
   const supportFlexGap = useFlexGapSupport();
 

From 0d2adc6f287e30ea5036d0cac55f69ad3a02ff6a Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Mon, 10 Oct 2022 18:58:29 +0800
Subject: [PATCH 09/15] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/grid/index.en-US.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
index 6387aa9b4aaf..f823b4462965 100644
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@@ -43,10 +43,10 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 ### Row
 
 | Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| align | Vertical alignment | `top` \| `middle` \| `bottom` | `top` |  |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'other']: 'top' | 'middle' | 'bottom' | 'stretch'}` | `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` \| `space-evenly` | `start` |  |
+| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'other']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'}` | `start` |  |
 | wrap | Auto wrap line | boolean | true | 4.8.0 |
 
 ### Col

From f7c430d026a3f749e80052d97ee1ba6e0d77a36f Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Mon, 10 Oct 2022 19:18:28 +0800
Subject: [PATCH 10/15] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/grid/index.en-US.md | 6 +++---
 components/grid/index.zh-CN.md | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
index f823b4462965..5858b0315294 100644
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@@ -43,10 +43,10 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 ### Row
 
 | Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
-| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'other']: 'top' | 'middle' | 'bottom' | 'stretch'}` | `top` |  |
+| --- | --- | --- | --- | --- |
+| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'other']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `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` \| `space-evenly` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'other']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'}` | `start` |  |
+| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'other']: '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 1e0f893d2a84..063de82f8262 100644
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -42,10 +42,10 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 ### Row
 
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
-| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'other']: 'top' | 'middle' | 'bottom' | 'stretch'}` | `top` |  |
+| --- | --- | --- | --- | --- | --- |
+| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \\ | 'other']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` |  |
 | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 |  |
-| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'other']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'}` | `start` |  |
+| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'other']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` |  |
 | wrap | 是否自动换行 | boolean | true | 4.8.0 |
 
 ### Col

From ac22513b43cb6971563c1d8c533c2ce0b8c0ab20 Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Mon, 10 Oct 2022 19:21:21 +0800
Subject: [PATCH 11/15] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/grid/index.zh-CN.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md
index 063de82f8262..17e976391621 100644
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -42,8 +42,8 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 ### Row
 
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- | --- |
-| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \\ | 'other']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` |  |
+| --- | --- | --- | --- | --- |
+| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'other']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` |  |
 | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 |  |
 | justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'other']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` |  |
 | wrap | 是否自动换行 | boolean | true | 4.8.0 |

From e66d8f36ea3bf63b1278d1a651c58b331f8eea96 Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Mon, 10 Oct 2022 19:26:13 +0800
Subject: [PATCH 12/15] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/grid/index.en-US.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
index 5858b0315294..d746426607da 100644
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@@ -44,7 +44,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'other']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` |  |
+| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'other']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `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` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'other']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` |  |
 | wrap | Auto wrap line | boolean | true | 4.8.0 |

From c73e7fd3247f8ca0822ac094257d8f4817564640 Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Tue, 11 Oct 2022 16:10:09 +0800
Subject: [PATCH 13/15] feat: remove other

---
 components/grid/__tests__/index.test.tsx | 8 --------
 components/grid/index.en-US.md           | 4 ++--
 components/grid/index.zh-CN.md           | 4 ++--
 components/grid/row.tsx                  | 8 +-------
 4 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/components/grid/__tests__/index.test.tsx b/components/grid/__tests__/index.test.tsx
index 89711ff6ac0d..cbe5d55b7876 100644
--- a/components/grid/__tests__/index.test.tsx
+++ b/components/grid/__tests__/index.test.tsx
@@ -162,10 +162,6 @@ describe('Grid', () => {
     expect(container2.innerHTML).toContain('ant-row-middle');
     const { container: container3 } = render(<Row align={{ lg: 'middle' }} />);
     expect(container3.innerHTML).not.toContain('ant-row-middle');
-    const { container: container4 } = render(<Row align={{ lg: 'middle', other: 'bottom' }} />);
-    expect(container4.innerHTML).toContain('ant-row-bottom');
-    const { container: container5 } = render(<Row align={{ xs: 'middle', other: 'bottom' }} />);
-    expect(container5.innerHTML).toContain('ant-row-middle');
   });
 
   it('should justify by responsive justify prop', () => {
@@ -186,9 +182,5 @@ describe('Grid', () => {
     expect(container2.innerHTML).toContain('ant-row-center');
     const { container: container3 } = render(<Row justify={{ lg: 'center' }} />);
     expect(container3.innerHTML).not.toContain('ant-row-center');
-    const { container: container4 } = render(<Row justify={{ lg: 'center', other: 'end' }} />);
-    expect(container4.innerHTML).toContain('ant-row-end');
-    const { container: container5 } = render(<Row justify={{ xs: 'center', other: 'end' }} />);
-    expect(container5.innerHTML).toContain('ant-row-center');
   });
 });
diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
index d746426607da..84359be70485 100644
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@@ -44,9 +44,9 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'other']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` |  |
+| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `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` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'other']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` |  |
+| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: '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 17e976391621..6b1e4b7a8465 100644
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -43,9 +43,9 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'other']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` |  |
+| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` |  |
 | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 |  |
-| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'other']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` |  |
+| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: '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 ec142892b7f7..ff32a141fb77 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -10,7 +10,7 @@ import RowContext from './RowContext';
 const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
 const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');
 
-type Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'other';
+type Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 type ResponsiveLike<T> = {
   [key in Responsive]?: T;
 };
@@ -39,13 +39,7 @@ function useMergePropByScreen(oriProp: RowProps['align'] | RowProps['justify'],
       const breakpoint: Breakpoint = responsiveArray[i];
       // if do not match, do nothing
       if (!screen[breakpoint]) continue;
-      // When 'align' and 'justify' sets the 'other' attribute,
-      // we need to set the value of the response attribute not explicitly set in 'align' adn 'justify' to the value of 'other'
       const curVal = oriProp[breakpoint];
-      if (oriProp.other && !curVal) {
-        setProp(oriProp.other);
-        return;
-      }
       if (curVal !== undefined) {
         setProp(curVal);
         return;

From 8ee904f896725fc35cfe0185fe99c0c7ca3ceaee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Tue, 11 Oct 2022 17:49:37 +0800
Subject: [PATCH 14/15] Update components/grid/index.zh-CN.md

Co-authored-by: afc163 <afc163@gmail.com>
---
 components/grid/index.zh-CN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md
index 6b1e4b7a8465..0b7d5d12adab 100644
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -43,7 +43,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` |  |
+| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 |
 | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 |  |
 | justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` |  |
 | wrap | 是否自动换行 | boolean | true | 4.8.0 |

From 348ba4be81fe4f80d9d733c889aa37473a5cd0de Mon Sep 17 00:00:00 2001
From: tangwenhui <tangwenhui@rd.netease.com>
Date: Tue, 11 Oct 2022 18:11:30 +0800
Subject: [PATCH 15/15] docs: update support version

---
 components/grid/index.en-US.md | 4 ++--
 components/grid/index.zh-CN.md | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
index 84359be70485..ef285894530a 100644
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@@ -44,9 +44,9 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` |  |
+| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 |
 | 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` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` |  |
+| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 |
 | 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 0b7d5d12adab..6fbe36bcad6b 100644
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -45,7 +45,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | --- | --- | --- | --- | --- |
 | align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 |
 | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 |  |
-| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` |  |
+| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 |
 | wrap | 是否自动换行 | boolean | true | 4.8.0 |
 
 ### Col