🐛 Fix Grid initial gutter (#20762)

like SSR situation

components/_util/responsiveObserve.ts

@@ -1,5 +1,6 @@
 export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 export type BreakpointMap = Partial<Record<Breakpoint, string>>;
+export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
 
 export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
 
@@ -12,7 +13,7 @@ export const responsiveMap: BreakpointMap = {
   xxl: '(min-width: 1600px)',
 };
 
-type SubscribeFunc = (screens: BreakpointMap) => void;
+type SubscribeFunc = (screens: ScreenMap) => void;
 
 let subscribers: Array<{
   token: string;
@@ -23,7 +24,7 @@ let screens = {};
 
 const responsiveObserve = {
   matchHandlers: {},
-  dispatch(pointMap: BreakpointMap) {
+  dispatch(pointMap: ScreenMap) {
     screens = pointMap;
     if (subscribers.length < 1) {
       return false;

components/descriptions/index.tsx

@@ -4,7 +4,7 @@ import toArray from 'rc-util/lib/Children/toArray';
 import warning from '../_util/warning';
 import ResponsiveObserve, {
   Breakpoint,
-  BreakpointMap,
+  ScreenMap,
   responsiveArray,
 } from '../_util/responsiveObserve';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
@@ -168,7 +168,7 @@ const defaultColumnMap = {
 class Descriptions extends React.Component<
   DescriptionsProps,
   {
-    screens: BreakpointMap;
+    screens: ScreenMap;
   }
 > {
   static defaultProps: DescriptionsProps = {
@@ -179,7 +179,7 @@ class Descriptions extends React.Component<
   static Item: typeof DescriptionsItem = DescriptionsItem;
 
   state: {
-    screens: BreakpointMap;
+    screens: ScreenMap;
   } = {
     screens: {},
   };

components/grid/__tests__/__snapshots__/demo.test.js.snap

@@ -487,11 +487,11 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
   </div>
   <div
     class="ant-row"
-    style="margin-top:-10px;margin-bottom:10px"
+    style="margin-left:-16px;margin-right:-16px;margin-top:-10px;margin-bottom:10px"
   >
     <div
       class="ant-col ant-col-6 gutter-row"
-      style="padding-top:10px;padding-bottom:10px"
+      style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
     >
       <div
         class="gutter-box"
@@ -501,7 +501,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
-      style="padding-top:10px;padding-bottom:10px"
+      style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
     >
       <div
         class="gutter-box"
@@ -511,7 +511,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
-      style="padding-top:10px;padding-bottom:10px"
+      style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
     >
       <div
         class="gutter-box"
@@ -521,7 +521,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
-      style="padding-top:10px;padding-bottom:10px"
+      style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
     >
       <div
         class="gutter-box"

components/grid/row.tsx

@@ -5,7 +5,7 @@ import RowContext from './RowContext';
 import { tuple } from '../_util/type';
 import ResponsiveObserve, {
   Breakpoint,
-  BreakpointMap,
+  ScreenMap,
   responsiveArray,
 } from '../_util/responsiveObserve';
 
@@ -21,7 +21,7 @@ export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export interface RowState {
-  screens: BreakpointMap;
+  screens: ScreenMap;
 }
 
 export default class Row extends React.Component<RowProps, RowState> {
@@ -30,7 +30,14 @@ export default class Row extends React.Component<RowProps, RowState> {
   };
 
   state: RowState = {
-    screens: {},
+    screens: {
+      xs: true,
+      sm: true,
+      md: true,
+      lg: true,
+      xl: true,
+      xxl: true,
+    },
   };
 
   token: string;