Grid

24 Grids System。

Design concept#

100%
25%
25%
25%
25%
33.33%
33.33%
33.33%
50%
50%
66.66%
33.33%

In most business situations,Ant Design need solve a lot of information storage problems within the design area,so based on 12 Grids System,we divided the design area into 24 aliquots.

We name the divided area as 'box'.We suggest that four boxes horizontal arrangement at most, one at least.Box on the proportion of the entire screen as above picture.To ensure that the level of visual comfort,we custom typography inside of the box based on the box unit.

Outline#

In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can steady arrangement.

Following is a brief look at how it works:

  • To establish a set of column in the horizontal direction byrow (abbreviated col)

  • Direct your content elements should be placed in the col, and onlycol as the row

  • The column grid system is a value of 1-24 to represent its range spans.For example, three columns of equal width can be created by .col-8.

  • If a row sum ofcol more than 24, then the extra col as a whole will start a new line arrangement.

Flex layout#

Our grid systems support Flex layout to allow the child elements within the parent horizontal alignment - Left, center, right of abode, and other wide arrangement, decentralized arrangement. Between sub-elements and sub-elements, support the top of the aligned vertically centered, bottom-aligned manner. At the same time, you can define the order of elements by using 'order'.

Flex layout is based on a grid 24 to define each "box" in width, but not rigidly adhere to the grid layout.

Examples

col-12
col-12
col-8
col-8
col-8
col-6
col-6
col-6
col-6
Basic Grid

From the stack to the horizontal arrangement.

You can create a basic grid system by using a single set of Row andCol grid assembly, all of the columns (Col) must be placed in Row.

import { Row, Col } from 'antd';

ReactDOM.render(
  <div>
    <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>
  </div>,
  mountNode
);
col-6
col-6
col-6
col-6
Grid Gutter

You can use the gutter property of Row as grid spacing, we recommend set it to (16 + 8n) px.

import { Row, Col } from 'antd';

ReactDOM.render(
  <div className="gutter-example">
    <Row gutter={16}>
      <Col className="gutter-row" span={6}>
        <div className="gutter-box">col-6</div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div className="gutter-box">col-6</div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div className="gutter-box">col-6</div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div className="gutter-box">col-6</div>
      </Col>
    </Row>
  </div>
, mountNode);
.gutter-example .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  background: #00A0E9;
  padding: 5px 0;
}
col-8
col-8
col-6 col-offset-6
col-6 col-offset-6
col-12 col-offset-6
Column offset

Offset can set the column to the right side. For example, using offset = {4} can set the element shifted to the right four columns width.

import { Row, Col } from 'antd';

ReactDOM.render(
  <div>
    <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>
  </div>,
  mountNode
);
col-18 col-push-6
col-6 col-pull-18
Grid sort

By using push andpull class you can easily change column order.

import { Row, Col } from 'antd';

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

sub-element align left

col-4
col-4
col-4
col-4

sub-element align center

col-4
col-4
col-4
col-4

sub-element align right

col-4
col-4
col-4
col-4

sub-element monospaced arrangement

col-4
col-4
col-4
col-4

sub-element align full

col-4
col-4
col-4
col-4
Flex Layout

Use row-flex defineflex layout, its child elements depending on the value of the start,center, end,space-between, space-around, which are defined in its parent node layout mode.

import { Row, Col } from 'antd';

ReactDOM.render(
  <div>
    <p>sub-element align left</p>
    <Row type="flex" 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>

    <p>sub-element align center</p>
    <Row type="flex" 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>

    <p>sub-element align right</p>
    <Row type="flex" 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>

    <p>sub-element monospaced arrangement</p>
    <Row type="flex" 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>

    <p>sub-element align full</p>
    <Row type="flex" 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>
  </div>,
  mountNode
);

Align Top

col-4

col-4

col-4

col-4

Align Center

col-4

col-4

col-4

col-4

Align Bottom

col-4

col-4

col-4

col-4

Flex Alignment

Flex child elements vertically aligned.

import { Row, Col } from 'antd';

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

ReactDOM.render(
  <div>
    <p>Align Top</p>
    <Row type="flex" 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>

    <p>Align Center</p>
    <Row type="flex" 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>

    <p>Align Bottom</p>
    <Row type="flex" 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>
  </div>,
  mountNode
);
1 col-order-4
2 col-order-3
3 col-order-2
4 col-order-1
Flex Order

To change the element sort by Flex layout order.

import { Row, Col } from 'antd';

ReactDOM.render(
  <div>
    <Row type="flex">
      <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>
  </div>,
  mountNode
);
Col
Col
Col
Responsive

Referring to the Bootstrap responsive design, here preset five dimensions: xs sm md lg xl.

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
More responsive

Span pull push offset order property can be embedded into xs sm md lg xl properties to use, where xs = {6} is equivalent to xs = {{span: 6}}.

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);
Gutter (px):
81624324048
Column Count:
2346812
Column
Column
Column
Column
<Row gutter={16}>
  <Col span={6} />
  <Col span={6} />
  <Col span={6} />
  <Col span={6} />
</Row>
Playground

A simple playground for column count and gutter.

import { Row, Col, Slider } from 'antd';

class App extends React.Component {
  gutters = {};
  colCounts = {};
  constructor() {
    super();
    this.state = {
      gutterKey: 1,
      colCountKey: 2,
    };
    [8, 16, 24, 32, 40, 48].forEach((value, i) => { this.gutters[i] = value; });
    [2, 3, 4, 6, 8, 12].forEach((value, i) => { this.colCounts[i] = value; });
  }
  onGutterChange = (gutterKey) => {
    this.setState({ gutterKey });
  }
  onColCountChange = (colCountKey) => {
    this.setState({ colCountKey });
  }
  render() {
    const { gutterKey, colCountKey } = this.state;
    const cols = [];
    const colCount = this.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 (
      <div>
        <div style={{ marginBottom: 16 }}>
          <span style={{ marginRight: 6 }}>Gutter (px): </span>
          <div style={{ width: '50%' }}>
            <Slider
              min={0}
              max={Object.keys(this.gutters).length - 1}
              value={gutterKey}
              onChange={this.onGutterChange}
              marks={this.gutters}
              step={null}
            />
          </div>
          <span style={{ marginRight: 6 }}>Column Count:</span>
          <div style={{ width: '50%' }}>
            <Slider
              min={0}
              max={Object.keys(this.colCounts).length - 1}
              value={colCountKey}
              onChange={this.onColCountChange}
              marks={this.colCounts}
              step={null}
            />
          </div>
        </div>
        <Row gutter={this.gutters[gutterKey]}>{cols}</Row>
        <pre>{`<Row gutter={${this.gutters[gutterKey]}}>\n${colCode}</Row>`}</pre>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
#components-grid-demo-playground [class^="ant-col-"] {
  background: transparent;
  border: 0;
}
#components-grid-demo-playground [class^="ant-col-"] > div {
  background: #00A0E9;
  height: 120px;
  line-height: 120px;
  font-size: 13px;
}
#components-grid-demo-playground pre {
  background: #f9f9f9;
  border-radius: 6px;
  font-size: 13px;
  padding: 8px 16px;
}

API#

Ant Design layout component if it can not meet your needs, you can use the excellent layout of the components of the community:

Row#

PropertyDescriptionTypeDefault
guttergrid spacingnumber0
typelayout mode, the optional flex, effective modern browserstring
alignthe vertical alignment of the layout of flex: top middle bottomstringtop
justifyhorizontal arrangement of the layout of flex: start end center space-around space-betweenstringstart

Col#

PropertyDescriptionTypeDefault
spanraster occupying the number of cells,0 corresponds to display: nonenumbernone
orderraster order, under flex effective layout modenumber0
offsetthe number of cells to the left of the grid spacing, no cell in grid spacingnumber0
pushthe number of cells that raster move to the rightnumber0
pullthe number of cells that raster move to the leftnumber0
xs<768px and also default setting, could be a span value or a object contain above propsnumber|object-
sm≥768px, could be a span value or a object contain above propsnumber|object-
md≥992px, could be a span value or a object contain above propsnumber|object-
lg≥1200px, could be a span value or a object contain above propsnumber|object-
xl≥1600px, could be a span value or a object contain above propsnumber|object-

The breakpoints of responsive grid follow BootStrap 3 media queries rules(not contain occasionally part).

IconLayout