--- order: 9 title: zh-CN: 栅格配置器 en-US: Playground --- ## zh-CN 可以简单配置几种等分栅格和间距。 ## en-US A simple playground for column count and gutter. ````__react 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].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]; let colCode = ''; for (let i = 0; i < colCount; i++) { cols.push(
Column
); colCode += ` \n`; } return (
Gutter (px):
Column Count:
{cols}
{`\n${colCode}`}
); } } 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; } #components-grid-demo-playground pre { background: #f9f9f9; border-radius: 6px; font-size: 13px; padding: 8px 16px; } ````