fix: only row gutter use gap (#29211)

* fix: only row gutter use gap

* test: Update test case

components/grid/__tests__/gap.test.js

@@ -20,8 +20,9 @@ describe('Grid.Gap', () => {
 
     expect(wrapper.find('.ant-row').props().style).toEqual(
       expect.objectContaining({
-        '--column-gap': '16px',
-        '--row-gap': '8px',
+        marginLeft: -8,
+        rowGap: 8,
+        marginRight: -8,
       }),
     );
   });

components/grid/col.tsx

@@ -103,24 +103,21 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
     sizeClassObj,
   );
 
-  let mergedStyle: React.CSSProperties = { ...style };
-  if (gutter && !detectFlexGapSupported()) {
-    mergedStyle = {
-      ...(gutter[0]! > 0
-        ? {
-            paddingLeft: gutter[0]! / 2,
-            paddingRight: gutter[0]! / 2,
-          }
-        : {}),
-      ...(gutter[1]! > 0
-        ? {
-            paddingTop: gutter[1]! / 2,
-            paddingBottom: gutter[1]! / 2,
-          }
-        : {}),
-      ...mergedStyle,
-    };
+  const mergedStyle: React.CSSProperties = {};
+  // Horizontal gutter use padding
+  if (gutter && gutter[0] > 0) {
+    const horizontalGutter = gutter[0] / 2;
+    mergedStyle.paddingLeft = horizontalGutter;
+    mergedStyle.paddingRight = horizontalGutter;
   }
+
+  // Vertical gutter use padding when gap not support
+  if (gutter && gutter[1] > 0 && !detectFlexGapSupported()) {
+    const verticalGutter = gutter[1] / 2;
+    mergedStyle.paddingTop = verticalGutter;
+    mergedStyle.paddingBottom = verticalGutter;
+  }
+
   if (flex) {
     mergedStyle.flex = parseFlex(flex);
 
@@ -132,7 +129,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
   }
 
   return (
-    <div {...others} style={mergedStyle} className={classes} ref={ref}>
+    <div {...others} style={{ ...mergedStyle, ...style }} className={classes} ref={ref}>
       {children}
     </div>
   );

components/grid/row.tsx

@@ -95,37 +95,19 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   );
 
   // Add gutter related style
-  let rowStyle: React.CSSProperties & {
-    '--column-gap'?: string | number;
-    '--row-gap'?: string | number;
-  } = {};
+  const rowStyle: React.CSSProperties = {};
+  const horizontalGutter = gutters[0] > 0 ? gutters[0] / -2 : undefined;
+  const verticalGutter = gutters[1] > 0 ? gutters[1] / -2 : undefined;
+
+  rowStyle.marginLeft = horizontalGutter;
+  rowStyle.marginRight = horizontalGutter;
 
   if (detectFlexGapSupported()) {
-    rowStyle = {
-      '--column-gap': '0px',
-      '--row-gap': '0px',
-    };
-
-    if (gutters[0]! > 0) {
-      const gap = gutters[0];
-      rowStyle.columnGap = gap;
-      rowStyle['--column-gap'] = `${gap}px`;
-    }
-    if (gutters[1]! > 0) {
-      const gap = gutters[1];
-      rowStyle.rowGap = gap;
-      rowStyle['--row-gap'] = `${gap}px`;
-    }
+    // Set gap direct if flex gap support
+    [, rowStyle.rowGap] = gutters;
   } else {
-    const horizontalGutter = gutters[0]! > 0 ? gutters[0] / -2 : undefined;
-    const verticalGutter = gutters[1]! > 0 ? gutters[1] / -2 : undefined;
-
-    rowStyle = {
-      marginLeft: horizontalGutter,
-      marginRight: horizontalGutter,
-      marginTop: verticalGutter,
-      marginBottom: verticalGutter,
-    };
+    rowStyle.marginTop = verticalGutter;
+    rowStyle.marginBottom = verticalGutter;
   }
 
   return (

components/grid/style/mixin.less

@@ -7,9 +7,7 @@
   .@{ant-prefix}-col@{class}-@{index} {
     display: block;
     flex: 0 0 percentage((@index / @grid-columns));
-    min-width: 0;
     max-width: percentage((@index / @grid-columns));
-    max-width: calc(percentage((@index / @grid-columns)) - ~'var(--column-gap)');
   }
   .@{ant-prefix}-col@{class}-push-@{index} {
     left: percentage((@index / @grid-columns));