---
order: 4
zh-CN:
  title: 布局
en-US:
  title: Layout
---

```jsx
import { Checkbox, LayoutRow as Row, LayoutCol as Col } from 'zent';
const CheckboxGroup = Checkbox.Group;

class App extends React.Component {
	state = {
		checkedList: [],
	};

	onChange = checkedList => {
		this.setState({ checkedList });
	};

	render() {
		const { checkedList } = this.state;

		return (
			<div>
				<CheckboxGroup
					value={checkedList}
					onChange={this.onChange}
					style={{ width: '100%' }}
				>
					<Row>
						<Col span={8}>
							<Checkbox value="A">A</Checkbox>
						</Col>
						<Col span={8}>
							<Checkbox value="B">B</Checkbox>
						</Col>
						<Col span={8}>
							<Checkbox value="C">C</Checkbox>
						</Col>
						<Col span={8}>
							<Checkbox value="D">D</Checkbox>
						</Col>
						<Col span={8}>
							<Checkbox value="E">E</Checkbox>
						</Col>
					</Row>
				</CheckboxGroup>
			</div>
		);
	}
}

ReactDOM.render(<App />, mountNode);
```