diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md
new file mode 100644
index 0000000000..df0663a90f
--- /dev/null
+++ b/components/grid/demo/playground.md
@@ -0,0 +1,94 @@
+---
+order: 9
+title:
+ zh-CN: 栅格配置器
+ en-US: Playground
+---
+
+## zh-CN
+
+可以简单配置几种等分栅格和间距。
+
+## en-US
+
+A simple playground for column count and gutter.
+
+````jsx
+import { Row, Col, Slider } from 'antd';
+
+class App extends React.Component {
+ gutters = {};
+ colCounts = {};
+ constructor() {
+ super();
+ this.state = {
+ gutterKey: 1,
+ colCountKey: 2,
+ };
+ [8, 16, 24, 32, 40, 48].forEach((value, i) => { this.gutters[i] = value; });
+ [2, 3, 4, 6, 8, 12, 24].forEach((value, i) => { this.colCounts[i] = value; });
+ }
+ onGutterChange = (gutterKey) => {
+ this.setState({ gutterKey });
+ }
+ onColCountChange = (colCountKey) => {
+ this.setState({ colCountKey });
+ }
+ render() {
+ const { gutterKey, colCountKey } = this.state;
+ const cols = [];
+ const colCount = this.colCounts[colCountKey];
+ for (let i = 0; i < colCount; i++) {
+ cols.push(
+
+
Column
+
+ );
+ }
+ return (
+
+
+
Gutter (px):
+
+
+
+
Column Count:
+
+
+
+
+
{cols}
+
+ );
+ }
+}
+
+ReactDOM.render(
, mountNode);
+````
+
+````css
+#components-grid-demo-playground [class^="ant-col-"] {
+ background: transparent;
+ border: 0;
+}
+#components-grid-demo-playground [class^="ant-col-"] > div {
+ background: #00A0E9;
+ height: 120px;
+ line-height: 120px;
+ font-size: 13px;
+}
+````