• Grid栅格
    • 设计理念
    • 概述
    • Flex 布局
    • 代码演示
    • API
      • Row
      • Col
    • FAQ
      • IE9 响应式不工作怎么办？

    Grid栅格

    24 栅格系统。

    设计理念

    Grid 栅格 - 图1

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

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

    概述

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

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

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

    • 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用.col-8来创建

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

    Flex 布局

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

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

    代码演示

    Grid 栅格 - 图2

    基础栅格

    从堆叠到水平排列。

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

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

    Grid 栅格 - 图3

    区块间隔

    栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔。(n 是自然数)

    如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }。

    1. import { Row, Col } from 'antd';
    3. ReactDOM.render(
    4.   <div className="gutter-example">
    5.     <Row gutter={16}>
    6.       <Col className="gutter-row" span={6}>
    7.         <div className="gutter-box">col-6</div>
    8.       </Col>
    9.       <Col className="gutter-row" span={6}>
    10.         <div className="gutter-box">col-6</div>
    11.       </Col>
    12.       <Col className="gutter-row" span={6}>
    13.         <div className="gutter-box">col-6</div>
    14.       </Col>
    15.       <Col className="gutter-row" span={6}>
    16.         <div className="gutter-box">col-6</div>
    17.       </Col>
    18.     </Row>
    19.   </div>,
    20.   mountNode,
    21. );
    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';
    3. ReactDOM.render(
    4.   <div>
    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.   </div>,
    25.   mountNode,
    26. );

    Grid 栅格 - 图5

    栅格排序

    列排序。

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

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

    Grid 栅格 - 图6

    Flex 布局

    Flex 布局基础。

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

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

    Grid 栅格 - 图7

    Flex 对齐

    Flex 子元素垂直对齐。

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

    Grid 栅格 - 图8

    Flex 排序

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

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

    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. class App extends React.Component {
    4.   gutters = {};
    6.   colCounts = {};
    8.   constructor() {
    9.     super();
    10.     this.state = {
    11.       gutterKey: 1,
    12.       colCountKey: 2,
    13.     };
    14.     [8, 16, 24, 32, 40, 48].forEach((value, i) => {
    15.       this.gutters[i] = value;
    16.     });
    17.     [2, 3, 4, 6, 8, 12].forEach((value, i) => {
    18.       this.colCounts[i] = value;
    19.     });
    20.   }
    22.   onGutterChange = gutterKey => {
    23.     this.setState({ gutterKey });
    24.   };
    26.   onColCountChange = colCountKey => {
    27.     this.setState({ colCountKey });
    28.   };
    30.   render() {
    31.     const { gutterKey, colCountKey } = this.state;
    32.     const cols = [];
    33.     const colCount = this.colCounts[colCountKey];
    34.     let colCode = '';
    35.     for (let i = 0; i < colCount; i++) {
    36.       cols.push(
    37.         <Col key={i.toString()} span={24 / colCount}>
    38.           <div>Column</div>
    39.         </Col>,
    40.       );
    41.       colCode += `  <Col span={${24 / colCount}} />\n`;
    42.     }
    43.     return (
    44.       <div>
    45.         <div style={{ marginBottom: 16 }}>
    46.           <span style={{ marginRight: 6 }}>Gutter (px): </span>
    47.           <div style={{ width: '50%' }}>
    48.             <Slider
    49.               min={0}
    50.               max={Object.keys(this.gutters).length - 1}
    51.               value={gutterKey}
    52.               onChange={this.onGutterChange}
    53.               marks={this.gutters}
    54.               step={null}
    55.             />
    56.           </div>
    57.           <span style={{ marginRight: 6 }}>Column Count:</span>
    58.           <div style={{ width: '50%' }}>
    59.             <Slider
    60.               min={0}
    61.               max={Object.keys(this.colCounts).length - 1}
    62.               value={colCountKey}
    63.               onChange={this.onColCountChange}
    64.               marks={this.colCounts}
    65.               step={null}
    66.             />
    67.           </div>
    68.         </div>
    69.         <Row gutter={this.gutters[gutterKey]}>{cols}</Row>
    70.         <pre>{`<Row gutter={${this.gutters[gutterKey]}}>\n${colCode}</Row>`}</pre>
    71.       </div>
    72.     );
    73.   }
    74. }
    76. 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 的布局组件若不能满足你的需求，你也可以直接使用社区的优秀布局组件：

    • react-flexbox-grid

    • react-blocks

    Row

    成员说明类型默认值
    alignflex 布局下的垂直对齐方式：top middle bottomstringtop
    gutter栅格间隔，可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24}number/object0
    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 添加支持。