📝 🎬 improve grid demo and documentaion

components/grid/demo/gutter.md

@@ -13,6 +13,8 @@ title:
 
 如果需要垂直间距，可以写成数组形式 `[水平间距, 垂直间距]` `[16, { xs: 8, sm: 16, md: 24, lg: 32 }]`。
 
+> 数组形式垂直间距在 `3.24.0` 之后支持。
+
 ## en-US
 
 You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`. (`n` stands for natural number.)
@@ -21,6 +23,8 @@ You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsi
 
 You can use a array to set vertical spacing, `[horizontal, vertical]` `[16, { xs: 8, sm: 16, md: 24, lg: 32 }]`.
 
+> vertical gutter was supported after `3.24.0`.
+
 ```jsx
 import { Row, Col } from 'antd';
 

components/grid/demo/responsive-more.md

@@ -13,7 +13,7 @@ title:
 
 ## en-US
 
-`span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` properties to use, where `xs = {6}` is equivalent to `xs = {{span: 6}}`.
+`span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` properties to use, where `xs={6}` is equivalent to `xs={{span: 6}}`.
 
 ```jsx
 import { Row, Col } from 'antd';

components/grid/index.en-US.md

@@ -70,7 +70,7 @@ Following is a brief look at how it works:
 
 - Establish a set of `column` in the horizontal space defined by `row` (abbreviated col)
 - Your content elements should be placed directly in the `col`, and only `col` should be placed directly in `row`
-- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `.col-8` (`span=8`).
+- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `<Col span={8} />`.
 - If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement.
 
 ## Flex layout
@@ -91,7 +91,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `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 |  |
+| 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]` (supported after `3.24.0`) | number/object/array | 0 |  |
 | justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` |  |
 | type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string |  |  |
 

components/grid/index.zh-CN.md

@@ -67,10 +67,10 @@ title: Grid
 
 布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
 
-- 通过`row`在水平方向建立一组`column`（简写 col）
-- 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
-- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建
-- 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列
+- 通过 `row` 在水平方向建立一组 `column`（简写 col）
+- 你的内容应当放置于 `col` 内，并且，只有 `col` 可以作为 `row` 的直接元素
+- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `<Col span={8} />` 来创建
+- 如果一个 `row` 中的 `col` 总和超过 24，那么多余的 `col` 会作为一个整体另起一行排列
 
 ## Flex 布局
 
@@ -90,7 +90,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` |  |
-| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`，或者使用数组形式同时设置`[水平间距, 垂直间距]` | number/object/array | 0 |  |
+| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`（`3.24.0 后支持`）。 | number/object/array | 0 |  |
 | justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` |  |
 | type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string |  |  |
 

site/theme/static/markdown.less

@@ -392,6 +392,14 @@
   }
 }
 
+[id='components-grid-demo-playground'],
+[id='components-grid-demo-gutter'] {
+  > .code-box-demo .ant-row > div {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
 // For Changelog
 .markdown ul.ant-timeline {
   line-height: 2;