mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
3.0 KiB
3.0 KiB
order | title | ||||
---|---|---|---|---|---|
1 |
|
zh-CN
栅格常常需要和间隔进行配合,你可以使用 Row
的 gutter
属性,我们推荐使用 (16+8n)px
作为栅格间隔(n 是自然数)。
如果要支持响应式,可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }
。
如果需要垂直间距,可以写成数组形式 [水平间距, 垂直间距]
[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).
You can set it to a object like { xs: 8, sm: 16, md: 24, lg: 32 }
for responsive design.
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
.
import { Row, Col, Divider } from 'antd';
const style = { background: '#0092ff', padding: '8px 0' };
ReactDOM.render(
<>
<Divider orientation="left">Horizontal</Divider>
<Row gutter={16}>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
</Row>
<Divider orientation="left">Responsive</Divider>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
</Row>
<Divider orientation="left">Vertical</Divider>
<Row gutter={[16, 24]}>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
</Row>
</>,
mountNode,
);
.gutter-box {
padding: 8px 0;
background: #00a0e9;
}