fix: Grid initial gutter

[afc163]

🤔 This is a ...

• New feature
• Bug fix
• Site / document update
• Component style update
• TypeScript definition update
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

💡 Background and solution

解决 next.ant.design 首屏卡片 ssr 初始化时间距为 0 的问题。

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese	修复 Grid 响应式 gutter 在 SSR 下初始值为 0 的问题。

☑️ Self Check before Merge

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[tests-checker]

Could you please add tests to make sure this change works as expected?

[netlify]

Deploy preview for ant-design ready!

Built with commit 56b4041

https://deploy-preview-20762--ant-design.netlify.com

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 06fb59cb8c2e1d810c02026e5cb0c67146b9c4a1:

Sandbox	Source
antd reproduction template	Configuration

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 56b4041:

Sandbox	Source
antd reproduction template	Configuration

[codecov]

Codecov Report

Merging #20762 into master will not change coverage.
The diff coverage is 100%.

@@           Coverage Diff           @@
##           master   #20762   +/-   ##
=======================================
  Coverage   97.46%   97.46%           
=======================================
  Files         296      296           
  Lines        6877     6877           
  Branches     1865     1865           
=======================================
  Hits         6703     6703           
  Misses        174      174

Impacted Files	Coverage Δ
components/descriptions/index.tsx	98.92% <ø> (ø)	⬆️
components/grid/row.tsx	100% <ø> (ø)	⬆️
components/_util/responsiveObserve.ts	92.3% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f3b9a16...56b4041. Read the comment docs.

[zombieJ]

ssr 下应该是 0 才对，如果 xs gutter 是 0，其他非 0。在移动端就是先大又缩回去。

[afc163]

ssr 下应该是 0 才对，如果 xs gutter 是 0，其他非 0。在移动端就是先大又缩回去。

这就是要抉择了，要么小屏幕先大后小，或者大屏幕先小后大。

[afc163]

现在首页跳动有点难看。或者给一个 defaultBreakpoint 的配置？？

[zombieJ]

我觉得如果没有很好的方案下，不做过多干预会好些。这其实和之前 remove less loop 一样，猜一个大屏幕，但是 windows 用户其实并不一定有 Mac 的分辨率。

[afc163]

我们至少应该在开发者给的 gutter 可能的取值中（以默认或者指定的方式）取一个作为初始值（例子中的 32 或者 40）：

ant-design/site/theme/template/Home/DesignPage/index.tsx

Lines 272 to 275 in 117495e

	gutter={[
	{ xs: 32, sm: 40 },
	{ xs: 32, sm: 40 },
	]}

，直接给 0 是 100% 跳动的。