Grid栅格

24 栅格系统。

设计理念

Grid栅格 - 图1

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

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

概述

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

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

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

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

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

Flex 布局

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

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

代码演示

Grid栅格 - 图2

基础栅格

从堆叠到水平排列。

使用单一的一组 RowCol 栅格组件,就可以创建一个基本的栅格系统,所有列(Col)必须放在 Row 内。

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

Grid栅格 - 图3

区块间隔

栅格常常需要和间隔进行配合,你可以使用 Rowgutter 属性,我们推荐使用 (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 } from 'antd';
  2. ReactDOM.render(
  3. <div className="gutter-example">
  4. <Row gutter={16}>
  5. <Col className="gutter-row" span={6}>
  6. <div className="gutter-box">col-6</div>
  7. </Col>
  8. <Col className="gutter-row" span={6}>
  9. <div className="gutter-box">col-6</div>
  10. </Col>
  11. <Col className="gutter-row" span={6}>
  12. <div className="gutter-box">col-6</div>
  13. </Col>
  14. <Col className="gutter-row" span={6}>
  15. <div className="gutter-box">col-6</div>
  16. </Col>
  17. </Row>
  18. <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32 }, 20]}>
  19. <Col className="gutter-row" span={6}>
  20. <div className="gutter-box">col-6</div>
  21. </Col>
  22. <Col className="gutter-row" span={6}>
  23. <div className="gutter-box">col-6</div>
  24. </Col>
  25. <Col className="gutter-row" span={6}>
  26. <div className="gutter-box">col-6</div>
  27. </Col>
  28. <Col className="gutter-row" span={6}>
  29. <div className="gutter-box">col-6</div>
  30. </Col>
  31. </Row>
  32. </div>,
  33. mountNode,
  34. );
  1. .gutter-example .ant-row > div {
  2. background: transparent;
  3. border: 0;
  4. }
  5. .gutter-box {
  6. background: #00a0e9;
  7. padding: 5px 0;
  8. }

Grid栅格 - 图4

左右偏移

列偏移。

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

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

Grid栅格 - 图5

栅格排序

列排序。

通过使用 pushpull 类就可以很容易的改变列(column)的顺序。

  1. import { Row, Col } from 'antd';
  2. ReactDOM.render(
  3. <div>
  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. </div>,
  13. mountNode,
  14. );

Grid栅格 - 图6

Flex 布局

Flex 布局基础。

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

  1. import { Row, Col } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <p>sub-element align left</p>
  5. <Row type="flex" justify="start">
  6. <Col span={4}>col-4</Col>
  7. <Col span={4}>col-4</Col>
  8. <Col span={4}>col-4</Col>
  9. <Col span={4}>col-4</Col>
  10. </Row>
  11. <p>sub-element align center</p>
  12. <Row type="flex" justify="center">
  13. <Col span={4}>col-4</Col>
  14. <Col span={4}>col-4</Col>
  15. <Col span={4}>col-4</Col>
  16. <Col span={4}>col-4</Col>
  17. </Row>
  18. <p>sub-element align right</p>
  19. <Row type="flex" justify="end">
  20. <Col span={4}>col-4</Col>
  21. <Col span={4}>col-4</Col>
  22. <Col span={4}>col-4</Col>
  23. <Col span={4}>col-4</Col>
  24. </Row>
  25. <p>sub-element monospaced arrangement</p>
  26. <Row type="flex" justify="space-between">
  27. <Col span={4}>col-4</Col>
  28. <Col span={4}>col-4</Col>
  29. <Col span={4}>col-4</Col>
  30. <Col span={4}>col-4</Col>
  31. </Row>
  32. <p>sub-element align full</p>
  33. <Row type="flex" justify="space-around">
  34. <Col span={4}>col-4</Col>
  35. <Col span={4}>col-4</Col>
  36. <Col span={4}>col-4</Col>
  37. <Col span={4}>col-4</Col>
  38. </Row>
  39. </div>,
  40. mountNode,
  41. );

Grid栅格 - 图7

Flex 对齐

Flex 子元素垂直对齐。

  1. import { Row, Col } from 'antd';
  2. const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
  3. ReactDOM.render(
  4. <div>
  5. <p>Align Top</p>
  6. <Row type="flex" justify="center" align="top">
  7. <Col span={4}>
  8. <DemoBox value={100}>col-4</DemoBox>
  9. </Col>
  10. <Col span={4}>
  11. <DemoBox value={50}>col-4</DemoBox>
  12. </Col>
  13. <Col span={4}>
  14. <DemoBox value={120}>col-4</DemoBox>
  15. </Col>
  16. <Col span={4}>
  17. <DemoBox value={80}>col-4</DemoBox>
  18. </Col>
  19. </Row>
  20. <p>Align Center</p>
  21. <Row type="flex" justify="space-around" align="middle">
  22. <Col span={4}>
  23. <DemoBox value={100}>col-4</DemoBox>
  24. </Col>
  25. <Col span={4}>
  26. <DemoBox value={50}>col-4</DemoBox>
  27. </Col>
  28. <Col span={4}>
  29. <DemoBox value={120}>col-4</DemoBox>
  30. </Col>
  31. <Col span={4}>
  32. <DemoBox value={80}>col-4</DemoBox>
  33. </Col>
  34. </Row>
  35. <p>Align Bottom</p>
  36. <Row type="flex" justify="space-between" align="bottom">
  37. <Col span={4}>
  38. <DemoBox value={100}>col-4</DemoBox>
  39. </Col>
  40. <Col span={4}>
  41. <DemoBox value={50}>col-4</DemoBox>
  42. </Col>
  43. <Col span={4}>
  44. <DemoBox value={120}>col-4</DemoBox>
  45. </Col>
  46. <Col span={4}>
  47. <DemoBox value={80}>col-4</DemoBox>
  48. </Col>
  49. </Row>
  50. </div>,
  51. mountNode,
  52. );

Grid栅格 - 图8

Flex 排序

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

  1. import { Row, Col } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Row type="flex">
  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. </div>,
  19. mountNode,
  20. );

Grid栅格 - 图9

响应式布局

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

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

Grid栅格 - 图10

其他属性的响应式

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

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

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

Grid栅格 - 图11

栅格配置器

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

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

API

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

Row

成员说明类型默认值版本
alignflex 布局下的垂直对齐方式:top middle bottomstringtop
gutter栅格间隔,可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]3.24.0 后支持)。number/object/array0
justifyflex 布局下的水平排列方式:start end center space-around space-betweenstringstart
type布局模式,可选 flex现代浏览器 下有效string

Col

成员说明类型默认值版本
offset栅格左侧的间隔格数,间隔内不可以有栅格number0
order栅格顺序,flex 布局模式下有效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 的部分)。

FAQ

IE9 响应式不工作怎么办?

可以引入 matchMedia polyfill 添加支持。