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 栅格来定义每一个『盒子』的宽度,但不拘泥于栅格。

代码演示

col
col-12
col-12
col-8
col-8
col-8
col-6
col-6
col-6
col-6

从堆叠到水平排列。

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

expand codeexpand code
import { Row, Col } from 'antd';

ReactDOM.render(
  <>
    <Row>
      <Col span={24}>col</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>
  </>,
  mountNode,
);
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6

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

expand codeexpand code
import { Row, Col, Divider } from 'antd';

const style = { background: '#0092ff', padding: '8px 0' };

ReactDOM.render(
  <>
    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      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" style={{ color: '#333', fontWeight: 'normal' }}>
      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" style={{ color: '#333', fontWeight: 'normal' }}>
      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;
}
col-8
col-8
col-6 col-offset-6
col-6 col-offset-6
col-12 col-offset-6

列偏移。

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

expand codeexpand code
import { Row, Col } from 'antd';

ReactDOM.render(
  <>
    <Row>
      <Col span={8}>col-8</Col>
      <Col span={8} offset={8}>
        col-8
      </Col>
    </Row>
    <Row>
      <Col span={6} offset={6}>
        col-6 col-offset-6
      </Col>
      <Col span={6} offset={6}>
        col-6 col-offset-6
      </Col>
    </Row>
    <Row>
      <Col span={12} offset={6}>
        col-12 col-offset-6
      </Col>
    </Row>
  </>,
  mountNode,
);
col-18 col-push-6
col-6 col-pull-18

列排序。

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

expand codeexpand code
import { Row, Col } from 'antd';

ReactDOM.render(
  <Row>
    <Col span={18} push={6}>
      col-18 col-push-6
    </Col>
    <Col span={6} pull={18}>
      col-6 col-pull-18
    </Col>
  </Row>,
  mountNode,
);
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4

布局基础。

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

expand codeexpand code
import { Row, Col, Divider } from 'antd';

ReactDOM.render(
  <>
    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      sub-element align left
    </Divider>
    <Row justify="start">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
    </Row>

    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      sub-element align center
    </Divider>
    <Row justify="center">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
    </Row>

    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      sub-element align right
    </Divider>
    <Row justify="end">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
    </Row>

    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      sub-element monospaced arrangement
    </Divider>
    <Row justify="space-between">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
    </Row>

    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      sub-element align full
    </Divider>
    <Row justify="space-around">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
    </Row>
  </>,
  mountNode,
);
#components-grid-demo-flex [class~='ant-row'] {
  background: rgba(128, 128, 128, 0.08);
}

col-4

col-4

col-4

col-4

col-4

col-4

col-4

col-4

col-4

col-4

col-4

col-4

子元素垂直对齐。

expand codeexpand code
import { Row, Col, Divider } from 'antd';

const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;

ReactDOM.render(
  <>
    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      Align Top
    </Divider>
    <Row justify="center" align="top">
      <Col span={4}>
        <DemoBox value={100}>col-4</DemoBox>
      </Col>
      <Col span={4}>
        <DemoBox value={50}>col-4</DemoBox>
      </Col>
      <Col span={4}>
        <DemoBox value={120}>col-4</DemoBox>
      </Col>
      <Col span={4}>
        <DemoBox value={80}>col-4</DemoBox>
      </Col>
    </Row>

    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      Align Middle
    </Divider>
    <Row justify="space-around" align="middle">
      <Col span={4}>
        <DemoBox value={100}>col-4</DemoBox>
      </Col>
      <Col span={4}>
        <DemoBox value={50}>col-4</DemoBox>
      </Col>
      <Col span={4}>
        <DemoBox value={120}>col-4</DemoBox>
      </Col>
      <Col span={4}>
        <DemoBox value={80}>col-4</DemoBox>
      </Col>
    </Row>

    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      Align Bottom
    </Divider>
    <Row justify="space-between" align="bottom">
      <Col span={4}>
        <DemoBox value={100}>col-4</DemoBox>
      </Col>
      <Col span={4}>
        <DemoBox value={50}>col-4</DemoBox>
      </Col>
      <Col span={4}>
        <DemoBox value={120}>col-4</DemoBox>
      </Col>
      <Col span={4}>
        <DemoBox value={80}>col-4</DemoBox>
      </Col>
    </Row>
  </>,
  mountNode,
);
#components-grid-demo-flex-align [class~='ant-row'] {
  background: rgba(128, 128, 128, 0.08);
}
1 col-order-4
2 col-order-3
3 col-order-2
4 col-order-1
1 col-order-esponsive
2 col-order-esponsive
3 col-order-esponsive
4 col-order-esponsive

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

expand codeexpand code
import { Row, Col, Divider } from 'antd';

ReactDOM.render(
  <>
    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      Normal
    </Divider>
    <Row>
      <Col span={6} order={4}>
        1 col-order-4
      </Col>
      <Col span={6} order={3}>
        2 col-order-3
      </Col>
      <Col span={6} order={2}>
        3 col-order-2
      </Col>
      <Col span={6} order={1}>
        4 col-order-1
      </Col>
    </Row>
    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      Responsive
    </Divider>
    <Row>
      <Col span={6} xs={{ order: 1 }} sm={{ order: 2 }} md={{ order: 3 }} lg={{ order: 4 }}>
        1 col-order-esponsive
      </Col>
      <Col span={6} xs={{ order: 2 }} sm={{ order: 1 }} md={{ order: 4 }} lg={{ order: 3 }}>
        2 col-order-esponsive
      </Col>
      <Col span={6} xs={{ order: 3 }} sm={{ order: 4 }} md={{ order: 2 }} lg={{ order: 1 }}>
        3 col-order-esponsive
      </Col>
      <Col span={6} xs={{ order: 4 }} sm={{ order: 3 }} md={{ order: 1 }} lg={{ order: 2 }}>
        4 col-order-esponsive
      </Col>
    </Row>
  </>,
  mountNode,
);
#components-grid-demo-flex-order [class~='ant-row'] {
  background: rgba(128, 128, 128, 0.08);
}
2 / 5
3 / 5
100px
Fill Rest
1 1 200px
0 1 300px

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

expand codeexpand code
import { Row, Col, Divider } from 'antd';

ReactDOM.render(
  <>
    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      Percentage columns
    </Divider>
    <Row>
      <Col flex={2}>2 / 5</Col>
      <Col flex={3}>3 / 5</Col>
    </Row>
    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      Fill rest 
    </Divider>
    <Row>
      <Col flex="100px">100px</Col>
      <Col flex="auto">Fill Rest</Col>
    </Row>
    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
      Raw flex style
    </Divider>
    <Row>
      <Col flex="1 1 200px">1 1 200px</Col>
      <Col flex="0 1 300px">0 1 300px</Col>
    </Row>
  </>,
  mountNode,
);
Col
Col
Col

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

expand codeexpand code
import { Row, Col } from 'antd';

ReactDOM.render(
  <Row>
    <Col xs={2} sm={4} md={6} lg={8} xl={10}>
      Col
    </Col>
    <Col xs={20} sm={16} md={12} lg={8} xl={4}>
      Col
    </Col>
    <Col xs={2} sm={4} md={6} lg={8} xl={10}>
      Col
    </Col>
  </Row>,
  mountNode,
);
Col
Col
Col

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

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

expand codeexpand code
import { Row, Col } from 'antd';

ReactDOM.render(
  <Row>
    <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
      Col
    </Col>
    <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>
      Col
    </Col>
    <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
      Col
    </Col>
  </Row>,
  mountNode,
);
Horizontal Gutter (px):
81624324048
Vertical Gutter (px):
81624324048
Column Count:
2346812
Column
Column
Column
Column
Column
Column
Column
Column
<Row gutter={[16, 16]}>
  <Col span={6} />
  <Col span={6} />
  <Col span={6} />
  <Col span={6} />
</Row>
<Row gutter={[16, 16]}>
  <Col span={6} />
  <Col span={6} />
  <Col span={6} />
  <Col span={6} />
</Row>

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

expand codeexpand code
import { Row, Col, Slider } from 'antd';

const gutters = {};
const vgutters = {};
const colCounts = {};

[8, 16, 24, 32, 40, 48].forEach((value, i) => {
  gutters[i] = value;
});
[8, 16, 24, 32, 40, 48].forEach((value, i) => {
  vgutters[i] = value;
});
[2, 3, 4, 6, 8, 12].forEach((value, i) => {
  colCounts[i] = value;
});

class App extends React.Component {
  state = {
    gutterKey: 1,
    vgutterKey: 1,
    colCountKey: 2,
  };

  onGutterChange = gutterKey => {
    this.setState({ gutterKey });
  };

  onVGutterChange = vgutterKey => {
    this.setState({ vgutterKey });
  };

  onColCountChange = colCountKey => {
    this.setState({ colCountKey });
  };

  render() {
    const { gutterKey, vgutterKey, colCountKey } = this.state;
    const cols = [];
    const colCount = colCounts[colCountKey];
    let colCode = '';
    for (let i = 0; i < colCount; i++) {
      cols.push(
        <Col key={i.toString()} span={24 / colCount}>
          <div>Column</div>
        </Col>,
      );
      colCode += `  <Col span={${24 / colCount}} />\n`;
    }
    return (
      <>
        <span style={{ marginRight: 6 }}>Horizontal Gutter (px): </span>
        <div style={{ width: '50%' }}>
          <Slider
            min={0}
            max={Object.keys(gutters).length - 1}
            value={gutterKey}
            onChange={this.onGutterChange}
            marks={gutters}
            step={null}
            tipFormatter={value => gutters[value]}
          />
        </div>
        <span style={{ marginRight: 6 }}>Vertical Gutter (px): </span>
        <div style={{ width: '50%' }}>
          <Slider
            min={0}
            max={Object.keys(vgutters).length - 1}
            value={vgutterKey}
            onChange={this.onVGutterChange}
            marks={vgutters}
            step={null}
            tipFormatter={value => vgutters[value]}
          />
        </div>
        <span style={{ marginRight: 6 }}>Column Count:</span>
        <div style={{ width: '50%', marginBottom: 48 }}>
          <Slider
            min={0}
            max={Object.keys(colCounts).length - 1}
            value={colCountKey}
            onChange={this.onColCountChange}
            marks={colCounts}
            step={null}
            tipFormatter={value => colCounts[value]}
          />
        </div>
        <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
        <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
        <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
        <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
      </>
    );
  }
}

ReactDOM.render(<App />, mountNode);
#components-grid-demo-playground [class~='ant-col'] {
  background: transparent;
  border: 0;
}
#components-grid-demo-playground [class~='ant-col'] > div {
  height: 120px;
  font-size: 14px;
  line-height: 120px;
  background: #0092ff;
  border-radius: 4px;
}
#components-grid-demo-playground pre {
  padding: 8px 16px;
  font-size: 13px;
  background: #f9f9f9;
  border-radius: 6px;
}
#components-grid-demo-playground pre.demo-code {
  direction: ltr;
}
Current break point:

使用 useBreakpoint Hook 个性化布局。

expand codeexpand code
import { Grid, Tag } from 'antd';

const { useBreakpoint } = Grid;

function UseBreakpointDemo() {
  const screens = useBreakpoint();
  return (
    <>
      Current break point:{' '}
      {Object.entries(screens)
        .filter(screen => !!screen[1])
        .map(screen => (
          <Tag color="blue" key={screen[0]}>
            {screen[0]}
          </Tag>
        ))}
    </>
  );
}

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 的部分)。

Divider分割线Layout布局