Grid栅格

24 栅格系统。

设计理念

100%

25%

25%

25%

25%

33.33%

33.33%

33.33%

50%

50%

66.66%

33.33%

在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。

划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。

概述

布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：

  • 通过 row 在水平方向建立一组 column（简写 col）

  • 你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素

  • 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 <Col span={8} /> 来创建

  • 如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列

我们的栅格化系统基于 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。

布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。

代码演示

Grid栅格 - 图1

基础栅格

从堆叠到水平排列。

使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。

  1. import { Row, Col } from 'antd';
  3. ReactDOM.render(
  4.   <>
  5.     <Row>
  6.       <Col span={24}>col</Col>
  7.     </Row>
  8.     <Row>
  9.       <Col span={12}>col-12</Col>
  10.       <Col span={12}>col-12</Col>
  11.     </Row>
  12.     <Row>
  13.       <Col span={8}>col-8</Col>
  14.       <Col span={8}>col-8</Col>
  15.       <Col span={8}>col-8</Col>
  16.     </Row>
  17.     <Row>
  18.       <Col span={6}>col-6</Col>
  19.       <Col span={6}>col-6</Col>
  20.       <Col span={6}>col-6</Col>
  21.       <Col span={6}>col-6</Col>
  22.     </Row>
  23.   </>,
  24.   mountNode,
  25. );

Grid栅格 - 图2

区块间隔

栅格常常需要和间隔进行配合，你可以使用 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 之后支持。

  1. import { Row, Col, Divider } from 'antd';
  3. const style = { background: '#0092ff', padding: '8px 0' };
  5. ReactDOM.render(
  6.   <>
  7.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  8.       Horizontal
  9.     </Divider>
  10.     <Row gutter={16}>
  11.       <Col className="gutter-row" span={6}>
  12.         <div style={style}>col-6</div>
  13.       </Col>
  14.       <Col className="gutter-row" span={6}>
  15.         <div style={style}>col-6</div>
  16.       </Col>
  17.       <Col className="gutter-row" span={6}>
  18.         <div style={style}>col-6</div>
  19.       </Col>
  20.       <Col className="gutter-row" span={6}>
  21.         <div style={style}>col-6</div>
  22.       </Col>
  23.     </Row>
  24.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  25.       Responsive
  26.     </Divider>
  27.     <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
  28.       <Col className="gutter-row" span={6}>
  29.         <div style={style}>col-6</div>
  30.       </Col>
  31.       <Col className="gutter-row" span={6}>
  32.         <div style={style}>col-6</div>
  33.       </Col>
  34.       <Col className="gutter-row" span={6}>
  35.         <div style={style}>col-6</div>
  36.       </Col>
  37.       <Col className="gutter-row" span={6}>
  38.         <div style={style}>col-6</div>
  39.       </Col>
  40.     </Row>
  41.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  42.       Vertical
  43.     </Divider>
  44.     <Row gutter={[16, 24]}>
  45.       <Col className="gutter-row" span={6}>
  46.         <div style={style}>col-6</div>
  47.       </Col>
  48.       <Col className="gutter-row" span={6}>
  49.         <div style={style}>col-6</div>
  50.       </Col>
  51.       <Col className="gutter-row" span={6}>
  52.         <div style={style}>col-6</div>
  53.       </Col>
  54.       <Col className="gutter-row" span={6}>
  55.         <div style={style}>col-6</div>
  56.       </Col>
  57.       <Col className="gutter-row" span={6}>
  58.         <div style={style}>col-6</div>
  59.       </Col>
  60.       <Col className="gutter-row" span={6}>
  61.         <div style={style}>col-6</div>
  62.       </Col>
  63.       <Col className="gutter-row" span={6}>
  64.         <div style={style}>col-6</div>
  65.       </Col>
  66.       <Col className="gutter-row" span={6}>
  67.         <div style={style}>col-6</div>
  68.       </Col>
  69.     </Row>
  70.   </>,
  71.   mountNode,
  72. );
  1. .gutter-box {
  2.   padding: 8px 0;
  3.   background: #00a0e9;
  4. }

Grid栅格 - 图3

左右偏移

列偏移。

使用 offset 可以将列向右侧偏。例如，offset={4} 将元素向右侧偏移了 4 个列（column）的宽度。

  1. import { Row, Col } from 'antd';
  3. ReactDOM.render(
  4.   <>
  5.     <Row>
  6.       <Col span={8}>col-8</Col>
  7.       <Col span={8} offset={8}>
  8.         col-8
  9.       </Col>
  10.     </Row>
  11.     <Row>
  12.       <Col span={6} offset={6}>
  13.         col-6 col-offset-6
  14.       </Col>
  15.       <Col span={6} offset={6}>
  16.         col-6 col-offset-6
  17.       </Col>
  18.     </Row>
  19.     <Row>
  20.       <Col span={12} offset={6}>
  21.         col-12 col-offset-6
  22.       </Col>
  23.     </Row>
  24.   </>,
  25.   mountNode,
  26. );

Grid栅格 - 图4

栅格排序

列排序。

通过使用 push 和 pull 类就可以很容易的改变列（column）的顺序。

  1. import { Row, Col } from 'antd';
  3. ReactDOM.render(
  4.   <Row>
  5.     <Col span={18} push={6}>
  6.       col-18 col-push-6
  7.     </Col>
  8.     <Col span={6} pull={18}>
  9.       col-6 col-pull-18
  10.     </Col>
  11.   </Row>,
  12.   mountNode,
  13. );

Grid栅格 - 图5

排版

布局基础。

子元素根据不同的值 start,center,end,space-between,space-around，分别定义其在父节点里面的排版方式。

  1. import { Row, Col, Divider } from 'antd';
  3. ReactDOM.render(
  4.   <>
  5.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  6.       sub-element align left
  7.     </Divider>
  8.     <Row justify="start">
  9.       <Col span={4}>col-4</Col>
  10.       <Col span={4}>col-4</Col>
  11.       <Col span={4}>col-4</Col>
  12.       <Col span={4}>col-4</Col>
  13.     </Row>
  15.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  16.       sub-element align center
  17.     </Divider>
  18.     <Row justify="center">
  19.       <Col span={4}>col-4</Col>
  20.       <Col span={4}>col-4</Col>
  21.       <Col span={4}>col-4</Col>
  22.       <Col span={4}>col-4</Col>
  23.     </Row>
  25.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  26.       sub-element align right
  27.     </Divider>
  28.     <Row justify="end">
  29.       <Col span={4}>col-4</Col>
  30.       <Col span={4}>col-4</Col>
  31.       <Col span={4}>col-4</Col>
  32.       <Col span={4}>col-4</Col>
  33.     </Row>
  35.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  36.       sub-element monospaced arrangement
  37.     </Divider>
  38.     <Row justify="space-between">
  39.       <Col span={4}>col-4</Col>
  40.       <Col span={4}>col-4</Col>
  41.       <Col span={4}>col-4</Col>
  42.       <Col span={4}>col-4</Col>
  43.     </Row>
  45.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  46.       sub-element align full
  47.     </Divider>
  48.     <Row justify="space-around">
  49.       <Col span={4}>col-4</Col>
  50.       <Col span={4}>col-4</Col>
  51.       <Col span={4}>col-4</Col>
  52.       <Col span={4}>col-4</Col>
  53.     </Row>
  54.   </>,
  55.   mountNode,
  56. );
  1. #components-grid-demo-flex [class~='ant-row'] {
  2.   background: rgba(128, 128, 128, 0.08);
  3. }

Grid栅格 - 图6

对齐

子元素垂直对齐。

  1. import { Row, Col, Divider } from 'antd';
  3. const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
  5. ReactDOM.render(
  6.   <>
  7.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  8.       Align Top
  9.     </Divider>
  10.     <Row justify="center" align="top">
  11.       <Col span={4}>
  12.         <DemoBox value={100}>col-4</DemoBox>
  13.       </Col>
  14.       <Col span={4}>
  15.         <DemoBox value={50}>col-4</DemoBox>
  16.       </Col>
  17.       <Col span={4}>
  18.         <DemoBox value={120}>col-4</DemoBox>
  19.       </Col>
  20.       <Col span={4}>
  21.         <DemoBox value={80}>col-4</DemoBox>
  22.       </Col>
  23.     </Row>
  25.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  26.       Align Middle
  27.     </Divider>
  28.     <Row justify="space-around" align="middle">
  29.       <Col span={4}>
  30.         <DemoBox value={100}>col-4</DemoBox>
  31.       </Col>
  32.       <Col span={4}>
  33.         <DemoBox value={50}>col-4</DemoBox>
  34.       </Col>
  35.       <Col span={4}>
  36.         <DemoBox value={120}>col-4</DemoBox>
  37.       </Col>
  38.       <Col span={4}>
  39.         <DemoBox value={80}>col-4</DemoBox>
  40.       </Col>
  41.     </Row>
  43.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  44.       Align Bottom
  45.     </Divider>
  46.     <Row justify="space-between" align="bottom">
  47.       <Col span={4}>
  48.         <DemoBox value={100}>col-4</DemoBox>
  49.       </Col>
  50.       <Col span={4}>
  51.         <DemoBox value={50}>col-4</DemoBox>
  52.       </Col>
  53.       <Col span={4}>
  54.         <DemoBox value={120}>col-4</DemoBox>
  55.       </Col>
  56.       <Col span={4}>
  57.         <DemoBox value={80}>col-4</DemoBox>
  58.       </Col>
  59.     </Row>
  60.   </>,
  61.   mountNode,
  62. );
  1. #components-grid-demo-flex-align [class~='ant-row'] {
  2.   background: rgba(128, 128, 128, 0.08);
  3. }

Grid栅格 - 图7

排序

通过 Order 来改变元素的排序。

  1. import { Row, Col } from 'antd';
  3. ReactDOM.render(
  4.   <Row>
  5.     <Col span={6} order={4}>
  6.       1 col-order-4
  7.     </Col>
  8.     <Col span={6} order={3}>
  9.       2 col-order-3
  10.     </Col>
  11.     <Col span={6} order={2}>
  12.       3 col-order-2
  13.     </Col>
  14.     <Col span={6} order={1}>
  15.       4 col-order-1
  16.     </Col>
  17.   </Row>,
  18.   mountNode,
  19. );
  1. #components-grid-demo-flex-order [class~='ant-row'] {
  2.   background: rgba(128, 128, 128, 0.08);
  3. }

Grid栅格 - 图8

Flex 填充

Col 提供 flex 属性以支持填充。

  1. import { Row, Col, Divider } from 'antd';
  3. ReactDOM.render(
  4.   <>
  5.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  6.       Percentage columns
  7.     </Divider>
  8.     <Row>
  9.       <Col flex={2}>2 / 5</Col>
  10.       <Col flex={3}>3 / 5</Col>
  11.     </Row>
  12.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  13.       Fill rest 
  14.     </Divider>
  15.     <Row>
  16.       <Col flex="100px">100px</Col>
  17.       <Col flex="auto">Fill Rest</Col>
  18.     </Row>
  19.     <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
  20.       Raw flex style
  21.     </Divider>
  22.     <Row>
  23.       <Col flex="1 1 200px">1 1 200px</Col>
  24.       <Col flex="0 1 300px">0 1 300px</Col>
  25.     </Row>
  26.   </>,
  27.   mountNode,
  28. );

Grid栅格 - 图9

响应式布局

参照 Bootstrap 的 响应式设计，预设六个响应尺寸：xs sm md lg xl xxl。

  1. import { Row, Col } from 'antd';
  3. ReactDOM.render(
  4.   <Row>
  5.     <Col xs={2} sm={4} md={6} lg={8} xl={10}>
  6.       Col
  7.     </Col>
  8.     <Col xs={20} sm={16} md={12} lg={8} xl={4}>
  9.       Col
  10.     </Col>
  11.     <Col xs={2} sm={4} md={6} lg={8} xl={10}>
  12.       Col
  13.     </Col>
  14.   </Row>,
  15.   mountNode,
  16. );

Grid栅格 - 图10

其他属性的响应式

span pull push offset order 属性可以通过内嵌到 xs sm md lg xl xxl 属性中来使用。

其中 xs={6} 相当于 xs={{ span: 6 }}。

  1. import { Row, Col } from 'antd';
  3. ReactDOM.render(
  4.   <Row>
  5.     <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
  6.       Col
  7.     </Col>
  8.     <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>
  9.       Col
  10.     </Col>
  11.     <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
  12.       Col
  13.     </Col>
  14.   </Row>,
  15.   mountNode,
  16. );

Grid栅格 - 图11

栅格配置器

可以简单配置几种等分栅格和间距。

  1. import { Row, Col, Slider } from 'antd';
  3. const gutters = {};
  4. const vgutters = {};
  5. const colCounts = {};
  7. [8, 16, 24, 32, 40, 48].forEach((value, i) => {
  8.   gutters[i] = value;
  9. });
  10. [8, 16, 24, 32, 40, 48].forEach((value, i) => {
  11.   vgutters[i] = value;
  12. });
  13. [2, 3, 4, 6, 8, 12].forEach((value, i) => {
  14.   colCounts[i] = value;
  15. });
  17. class App extends React.Component {
  18.   state = {
  19.     gutterKey: 1,
  20.     vgutterKey: 1,
  21.     colCountKey: 2,
  22.   };
  24.   onGutterChange = gutterKey => {
  25.     this.setState({ gutterKey });
  26.   };
  28.   onVGutterChange = vgutterKey => {
  29.     this.setState({ vgutterKey });
  30.   };
  32.   onColCountChange = colCountKey => {
  33.     this.setState({ colCountKey });
  34.   };
  36.   render() {
  37.     const { gutterKey, vgutterKey, colCountKey } = this.state;
  38.     const cols = [];
  39.     const colCount = colCounts[colCountKey];
  40.     let colCode = '';
  41.     for (let i = 0; i < colCount; i++) {
  42.       cols.push(
  43.         <Col key={i.toString()} span={24 / colCount}>
  44.           <div>Column</div>
  45.         </Col>,
  46.       );
  47.       colCode += `  <Col span={${24 / colCount}} />\n`;
  48.     }
  49.     return (
  50.       <>
  51.         <span style={{ marginRight: 6 }}>Horizontal Gutter (px): </span>
  52.         <div style={{ width: '50%' }}>
  53.           <Slider
  54.             min={0}
  55.             max={Object.keys(gutters).length - 1}
  56.             value={gutterKey}
  57.             onChange={this.onGutterChange}
  58.             marks={gutters}
  59.             step={null}
  60.             tipFormatter={value => gutters[value]}
  61.           />
  62.         </div>
  63.         <span style={{ marginRight: 6 }}>Vertical Gutter (px): </span>
  64.         <div style={{ width: '50%' }}>
  65.           <Slider
  66.             min={0}
  67.             max={Object.keys(vgutters).length - 1}
  68.             value={vgutterKey}
  69.             onChange={this.onVGutterChange}
  70.             marks={vgutters}
  71.             step={null}
  72.             tipFormatter={value => vgutters[value]}
  73.           />
  74.         </div>
  75.         <span style={{ marginRight: 6 }}>Column Count:</span>
  76.         <div style={{ width: '50%', marginBottom: 48 }}>
  77.           <Slider
  78.             min={0}
  79.             max={Object.keys(colCounts).length - 1}
  80.             value={colCountKey}
  81.             onChange={this.onColCountChange}
  82.             marks={colCounts}
  83.             step={null}
  84.             tipFormatter={value => colCounts[value]}
  85.           />
  86.         </div>
  87.         <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
  88.         <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
  89.         <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
  90.         <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
  91.       </>
  92.     );
  93.   }
  94. }
  96. ReactDOM.render(<App />, mountNode);
  1. #components-grid-demo-playground [class~='ant-col'] {
  2.   background: transparent;
  3.   border: 0;
  4. }
  5. #components-grid-demo-playground [class~='ant-col'] > div {
  6.   height: 120px;
  7.   font-size: 14px;
  8.   line-height: 120px;
  9.   background: #0092ff;
  10.   border-radius: 4px;
  11. }
  12. #components-grid-demo-playground pre {
  13.   padding: 8px 16px;
  14.   font-size: 13px;
  15.   background: #f9f9f9;
  16.   border-radius: 6px;
  17. }
  18. #components-grid-demo-playground pre.demo-code {
  19.   direction: ltr;
  20. }

Grid栅格 - 图12

useBreakpoint Hook

使用 useBreakpoint Hook 个性化布局。

  1. import { Grid, Tag } from 'antd';
  3. const { useBreakpoint } = Grid;
  5. function UseBreakpointDemo() {
  6.   const screens = useBreakpoint();
  7.   return (
  8.     <>
  9.       Current break point:{' '}
  10.       {Object.entries(screens)
  11.         .filter(screen => !!screen[1])
  12.         .map(screen => (
  13.           <Tag color="blue" key={screen[0]}>
  14.             {screen[0]}
  15.           </Tag>
  16.         ))}
  17.     </>
  18.   );
  19. }
  21. ReactDOM.render(<UseBreakpointDemo />, mountNode);

API

Ant Design 的布局组件若不能满足你的需求，你也可以直接使用社区的优秀布局组件：

Row

成员说明类型默认值版本
align垂直对齐方式top | middle | bottomtop
gutter栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]。number/object/array0
justify水平排列方式start | end | center | space-around | space-betweenstart

Col

成员说明类型默认值版本
flexflex 布局属性string | number-
offset栅格左侧的间隔格数，间隔内不可以有栅格number0
order栅格顺序number0
pull栅格向左移动格数number0
push栅格向右移动格数number0
span栅格占位格数，为 0 时相当于 display: nonenumber-
xs<576px 响应式栅格，可为栅格数或一个包含其他属性的对象number|object-
sm≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象number|object-
md≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象number|object-
lg≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象number|object-
xl≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象number|object-
xxl≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象number|object-

响应式栅格的断点扩展自 BootStrap 4 的规则（不包含链接里 occasionally 的部分)。