Grid 栅格 #

概述 #

Ant Design 采用 24 栅格系统，通过 Row（行）和 Col（列）组件实现灵活的页面布局。栅格系统可以帮助你快速构建响应式页面。

text

┌──────────────────────────────────────────────────────┐
│                    24 栅格系统                        │
├──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┤
│1 │2 │3 │4 │5 │6 │7 │8 │9 │10│11│12│13│14│15│16│17│18│19│20│21│22│23│24│
└──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┘

基础用法 #

基本栅格 #

使用 span 属性设置列宽：

tsx

import { Row, Col } from 'antd';

<>
  <Row>
    <Col span={24}>col-24</Col>
  </Row>
  <Row>
    <Col span={12}>col-12</Col>
    <Col span={12}>col-12</Col>
  </Row>
  <Row>
    <Col span={8}>col-8</Col>
    <Col span={8}>col-8</Col>
    <Col span={8}>col-8</Col>
  </Row>
  <Row>
    <Col span={6}>col-6</Col>
    <Col span={6}>col-6</Col>
    <Col span={6}>col-6</Col>
    <Col span={6}>col-6</Col>
  </Row>
</>

间距 #

使用 gutter 设置列间距：

tsx

import { Row, Col } from 'antd';

<Row gutter={16}>
  <Col span={6}>
    <div>col-6</div>
  </Col>
  <Col span={6}>
    <div>col-6</div>
  </Col>
  <Col span={6}>
    <div>col-6</div>
  </Col>
  <Col span={6}>
    <div>col-6</div>
  </Col>
</Row>

水平和垂直间距 #

tsx

import { Row, Col } from 'antd';

<Row gutter={[16, 24]}>
  <Col span={6}>
    <div>col-6</div>
  </Col>
  <Col span={6}>
    <div>col-6</div>
  </Col>
  <Col span={6}>
    <div>col-6</div>
  </Col>
  <Col span={6}>
    <div>col-6</div>
  </Col>
</Row>

偏移 #

使用 offset 设置偏移：

tsx

import { Row, Col } from 'antd';

<Row>
  <Col span={8}>col-8</Col>
  <Col span={8} offset={8}>col-8 offset-8</Col>
</Row>

<Row>
  <Col span={6} offset={6}>col-6 offset-6</Col>
  <Col span={6} offset={6}>col-6 offset-6</Col>
</Row>

排序 #

使用 push 和 pull 改变列的顺序：

tsx

import { Row, Col } from 'antd';

<Row>
  <Col span={18} push={6}>col-18 push-6</Col>
  <Col span={6} pull={18}>col-6 pull-18</Col>
</Row>

Flex 布局 #

使用 flex 属性实现 Flex 布局：

tsx

import { Row, Col } from 'antd';

<Row>
  <Col flex={2}>2 / 5</Col>
  <Col flex={3}>3 / 5</Col>
</Row>

<Row>
  <Col flex="100px">100px</Col>
  <Col flex="auto">auto</Col>
  <Col flex="100px">100px</Col>
</Row>

对齐方式 #

水平对齐 #

tsx

import { Row, Col } from 'antd';

<Row justify="start">
  <Col span={4}>col-4</Col>
  <Col span={4}>col-4</Col>
</Row>

<Row justify="center">
  <Col span={4}>col-4</Col>
  <Col span={4}>col-4</Col>
</Row>

<Row justify="end">
  <Col span={4}>col-4</Col>
  <Col span={4}>col-4</Col>
</Row>

<Row justify="space-between">
  <Col span={4}>col-4</Col>
  <Col span={4}>col-4</Col>
</Row>

<Row justify="space-around">
  <Col span={4}>col-4</Col>
  <Col span={4}>col-4</Col>
</Row>

值	说明
start	左对齐
center	居中
end	右对齐
space-between	两端对齐
space-around	等距分布
space-evenly	均匀分布

垂直对齐 #

tsx

import { Row, Col } from 'antd';

<Row align="top">
  <Col span={4} style={{ height: 100 }}>col-4</Col>
  <Col span={4} style={{ height: 60 }}>col-4</Col>
</Row>

<Row align="middle">
  <Col span={4} style={{ height: 100 }}>col-4</Col>
  <Col span={4} style={{ height: 60 }}>col-4</Col>
</Row>

<Row align="bottom">
  <Col span={4} style={{ height: 100 }}>col-4</Col>
  <Col span={4} style={{ height: 60 }}>col-4</Col>
</Row>

值	说明
top	顶部对齐
middle	居中对齐
bottom	底部对齐
stretch	拉伸对齐

响应式布局 #

响应式参数 #

Ant Design 提供了五个响应式断点：

断点	尺寸	说明
xs	<576px	手机
sm	≥576px	小屏手机
md	≥768px	平板
lg	≥992px	桌面显示器
xl	≥1200px	大桌面显示器
xxl	≥1600px	超大显示器

响应式示例 #

tsx

import { Row, Col } from 'antd';

<Row>
  <Col xs={24} sm={12} md={8} lg={6} xl={4}>
    响应式列
  </Col>
  <Col xs={24} sm={12} md={8} lg={6} xl={4}>
    响应式列
  </Col>
  <Col xs={24} sm={12} md={8} lg={6} xl={4}>
    响应式列
  </Col>
  <Col xs={24} sm={12} md={8} lg={6} xl={4}>
    响应式列
  </Col>
</Row>

详细配置 #

tsx

import { Row, Col } from 'antd';

<Row>
  <Col
    xs={{ span: 5, offset: 1 }}
    lg={{ span: 6, offset: 2 }}
  >
    详细配置
  </Col>
  <Col
    xs={{ span: 11, offset: 1 }}
    lg={{ span: 6, offset: 2 }}
  >
    详细配置
  </Col>
</Row>

API #

Row #

属性	说明	类型	默认值
align	垂直对齐	`top` \| `middle` \| `bottom` \| `stretch`	-
gutter	间距	number \| [number, number]	0
justify	水平对齐	`start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly`	`start`
wrap	是否换行	boolean	true

Col #

属性	说明	类型	默认值
flex	flex 布局	string \| number	-
offset	偏移格数	number	0
order	排序	number	0
pull	向左移动格数	number	0
push	向右移动格数	number	0
span	占据格数	number	-
xs	<576px 响应式	number \| object	-
sm	≥576px 响应式	number \| object	-
md	≥768px 响应式	number \| object	-
lg	≥992px 响应式	number \| object	-
xl	≥1200px 响应式	number \| object	-
xxl	≥1600px 响应式	number \| object	-

最佳实践 #

1. 常见布局模式 #

等分布局 #

tsx

<Row gutter={16}>
  <Col span={6}>25%</Col>
  <Col span={6}>25%</Col>
  <Col span={6}>25%</Col>
  <Col span={6}>25%</Col>
</Row>

左右布局 #

tsx

<Row gutter={16}>
  <Col span={18}>主内容区</Col>
  <Col span={6}>侧边栏</Col>
</Row>

圣杯布局 #

tsx

<Row gutter={16}>
  <Col span={4}>左侧边栏</Col>
  <Col span={16}>主内容</Col>
  <Col span={4}>右侧边栏</Col>
</Row>

2. 响应式最佳实践 #

tsx

<Row gutter={[16, 16]}>
  <Col xs={24} sm={12} md={8} lg={6}>
    <Card>卡片内容</Card>
  </Col>
  <Col xs={24} sm={12} md={8} lg={6}>
    <Card>卡片内容</Card>
  </Col>
  <Col xs={24} sm={12} md={8} lg={6}>
    <Card>卡片内容</Card>
  </Col>
  <Col xs={24} sm={12} md={8} lg={6}>
    <Card>卡片内容</Card>
  </Col>
</Row>

3. 使用 Flex 实现自适应 #

tsx

<Row>
  <Col flex="200px">固定宽度</Col>
  <Col flex="auto">自适应宽度</Col>
  <Col flex="200px">固定宽度</Col>
</Row>

下一步 #

接下来学习 Layout 布局组件！