improve playground.md

components/grid/demo/playground.md

@@ -26,7 +26,7 @@ class App extends React.Component {
       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; });
+    [2, 3, 4, 6, 8, 12].forEach((value, i) => { this.colCounts[i] = value; });
   }
   onGutterChange = (gutterKey) => {
     this.setState({ gutterKey });
@@ -38,12 +38,14 @@ class App extends React.Component {
     const { gutterKey, colCountKey } = this.state;
     const cols = [];
     const colCount = this.colCounts[colCountKey];
+    let colCode = '';
     for (let i = 0; i < colCount; i++) {
       cols.push(
         <Col key={i.toString()} span={24 / colCount}>
           <div>Column</div>
         </Col>
       );
+      colCode += `  <Col span={${24 / colCount}} />\n`;
     }
     return (
       <div>
@@ -72,6 +74,7 @@ class App extends React.Component {
           </div>
         </div>
         <Row gutter={this.gutters[gutterKey]}>{cols}</Row>
+        <pre>{`<Row gutter={${this.gutters[gutterKey]}}>\n${colCode}</Row>`}</pre>
       </div>
     );
   }
@@ -91,4 +94,10 @@ ReactDOM.render(<App />, mountNode);
   line-height: 120px;
   font-size: 13px;
 }
+#components-grid-demo-playground pre {
+  background: #f9f9f9;
+  border-radius: 6px;
+  font-size: 13px;
+  padding: 8px 16px;
+}
 ````