Grid

Example
基础布局
固定宽度列
列间距
溢出后是否换行
嵌套布局
响应式布局
显示与隐藏
设置行的宽度
偏移
固定宽度偏移
多列垂直方向对齐方式
多列水平方向对齐方式
自定义元素渲染类型
无障碍键盘操作指南
API

栅格组件。

如何使用 #

此栅格系统提供了320，480，720, 990，1200，1500等几乎所有主流分辨率场景的响应规则。
响应式栅格采用24列栅格体系和5分比实现，以满足2，3，4，5，6分比布局等多种情况。
固定栅格采用 20px 宽度作为单位栅格，推荐使用9，10，12，14，16，18，24，但同时也提供了从1到30的所有栅格，也可根据需求定制固定栅格列。
响应式断点阈值为：xss(320px), xs(480px), s(720px), m(990px), l(1200px), xl(1500px)。
基于Flex实现，对 IE9 通过 display:table; 兼容实现，但 IE9 仅支持基本的响应式布局（详情请参考 API 和 DEMO 的说明）。

代码演示 #

基础布局 #

通过 Col 的 span 属性指定该列宽度占整行宽度24分之几或5分之几。

import ReactDOM from 'react-dom';
import { Grid } from '@alifd/next';
const { Row, Col } = Grid;
ReactDOM.render(
  <div className="basic-demo">
    <div className="grid-fixed-demo-title">One</div>
    <Row>
      <Col span="24">col-24</Col>
    </Row>
    <div className="grid-fixed-demo-title">Two</div>
    <Row>
      <Col span="12">col-12</Col>
      <Col span="12">col-12</Col>
    </Row>
    <div className="grid-fixed-demo-title">Three</div>
    <Row>
      <Col span="8">col-8</Col>
      <Col span="8">col-8</Col>
      <Col span="8">col-8</Col>
    </Row>
    <div className="grid-fixed-demo-title">Four</div>
    <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 className="grid-fixed-demo-title">Five</div>
    <Row>
      <Col span="1p5">col-1p5</Col>
      <Col span="1p5">col-1p5</Col>
      <Col span="1p5">col-1p5</Col>
      <Col span="1p5">col-1p5</Col>
      <Col span="1p5">col-1p5</Col>
    </Row>
    <div className="grid-fixed-demo-title">Six</div>
    <Row>
      <Col span="4">col-4</Col>
      <Col span="4">col-4</Col>
      <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
);

固定宽度列 #

通过 Col 的 fixedSpan 属性来指定某列为固定宽度列，其宽度的计算方式为 20 * fixedSpan。

列间距 #

列与列间距默认为0，可以通过设置 Row 的 gutter 属性来改变列间距。

import React from 'react';
import ReactDOM from 'react-dom';
import { Range, Grid } from '@alifd/next';
const { Row, Col } = Grid;
class Demo extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      gutter: 0,
    };
    this.handleChange = gutter => {
      this.setState({
        gutter,
      });
    };
  }
  render() {
    const { gutter } = this.state;
    return (
      <div className="gutter-demo">
        <Range
          value={gutter}
          onChange={this.handleChange}
          marks={4}
          step={4}
          max={16}
          hasTip={false}
          style={{ width: '400px', marginLeft: '20px', marginTop: '30px' }}
        />
        <Row gutter={gutter}>
          <Col span="6">
            <div className="demo-col-inset">col-6</div>
          </Col>
          <Col span="6">
            <div className="demo-col-inset">col-6</div>
          </Col>
          <Col span="6">
            <div className="demo-col-inset">col-6</div>
          </Col>
          <Col span="6">
            <div className="demo-col-inset">col-6</div>
          </Col>
        </Row>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

溢出后是否换行 #

（不支持 IE9 浏览器）默认列在行中宽度溢出后不会换行，如果想自动换行，请为 Row 设置 wrap 为 true。

嵌套布局 #

Col 下也可嵌套 Row，以完成更细致的布局。

响应式布局 #

类似 Bootstrap 的响应式设计，预设6个响应尺寸：xxs(320px), xs(480px), s(720px), m(990px), l(1200px), xl(1500px)。

显示与隐藏 #

提供了强大的响应式的显示与隐藏功能，支持在不同断点下的显示与隐藏。

import ReactDOM from 'react-dom';
import { Grid } from '@alifd/next';
const { Row, Col } = Grid;
ReactDOM.render(
  <div className="hidden-demo">
    <div className="grid-fixed-demo-title">
      Hide columns under all breakpoints, resize browser to see if the second column is hidden or
      shown
    </div>
    <Row>
      <Col span="8">col-8</Col>
      <Col span="16" hidden>
        col-16
      </Col>
    </Row>
    <div className="grid-fixed-demo-title">
      Hide columns under a breakpoint such as xs, resize browser to see if the second column is
      hidden or shown
    </div>
    <Row>
      <Col span="8">col-8</Col>
      <Col span="16" hidden="xs">
        col-16
      </Col>
    </Row>
    <div className="grid-fixed-demo-title">
      Hide columns under some breakpoints such as xs and s, resize browser to see if the second
      column is hidden or shown
    </div>
    <Row>
      <Col span="8">col-8</Col>
      <Col span="16" hidden={['xs', 's']}>
        col-16
      </Col>
    </Row>
  </div>,
  mountNode
);

设置行的宽度 #

默认 Row 的宽度被设置为100%，可以通过设置 fixed 属性为 true，来让 Row 的宽度不立刻随着是视口大小变动而变动，而是在某个断点下维持固定的宽度，也可以通过设置 fixedWidth 属性为某一断点值，从而固定 Row 的宽度，不再随着视口大小变动而变动。

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid } from '@alifd/next';
const { Row, Col } = Grid;
const breakpoints = {
  xxs: 320,
  xs: 480,
  s: 720,
  m: 990,
  l: 1200,
  xl: 1500,
};
class Demo extends React.Component {
  componentDidMount() {
    const row = ReactDOM.findDOMNode(this.refs.fixCol);
    this.handleResize = () => {
      let point = '';
      const innerWidth =
        window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      const keys = Object.keys(breakpoints);
      for (let i = 0; i < keys.length; i++) {
        const width = breakpoints[keys[i]];
        const nextWidth = breakpoints[keys[i + 1]];
        if (innerWidth > width && (innerWidth < nextWidth || !nextWidth)) {
          point = keys[i];
          break;
        }
      }
      if (point) {
        row.innerHTML = `${breakpoints[point]}px`;
      }
    };
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }
  render() {
    return (
      <div className="type-demo">
        <div className="grid-fixed-demo-title">Default</div>
        <Row>
          <Col>100%</Col>
        </Row>
        <div className="grid-fixed-demo-title">Set fixed to true</div>
        <Row ref="fixedRow" fixed>
          <Col ref="fixCol" />
        </Row>
        <div className="grid-fixed-demo-title">Set fixedWidth to 's'</div>
        <Row fixedWidth="s">
          <Col>720px</Col>
        </Row>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

偏移 #

（不支持 IE9 浏览器）列可以向右偏移一定距离，该距离的计算方式和列所占宽度计算方式相同。

固定宽度偏移 #

（不支持 IE9 浏览器）列可以向右偏移一定距离，该距离的计算方式和固定宽度列的宽度相同。

多列垂直方向对齐方式 #

（不支持 IE9 浏览器）基于 Flex 的 align-items 和 align-self 属性实现，在 Row 上设置 align 属性，即可控制 Row 下面所有 Col 的垂直方向对齐方式：top（顶部对齐，默认），center（居中对齐），bottom（底部对齐），baseline（第一行文字的基线对齐），stretch（如果未设置高度或设为 auto，将占满整个容器的高度）；在 Col 上设置 align 属性，可允许它与其它列不一样的对齐方式，覆盖 Row 的 align 属性。

import ReactDOM from 'react-dom';
import { Grid } from '@alifd/next';
const { Row, Col } = Grid;
ReactDOM.render(
  <div className="align-demo">
    <div className="grid-fixed-demo-title">top</div>
    <Row align="top">
      <Col span="8" style={{ height: '100px', lineHeight: '100px' }}>
        col-8
      </Col>
      <Col span="8" style={{ height: '50px', lineHeight: '50px' }}>
        col-8
      </Col>
      <Col span="8" style={{ height: '150px', lineHeight: '150px' }}>
        col-8
      </Col>
    </Row>
    <div className="grid-fixed-demo-title">center</div>
    <Row align="center">
      <Col span="8" style={{ height: '100px', lineHeight: '100px' }}>
        col-8
      </Col>
      <Col span="8" style={{ height: '50px', lineHeight: '50px' }}>
        col-8
      </Col>
      <Col span="8" style={{ height: '150px', lineHeight: '150px' }}>
        col-8
      </Col>
    </Row>
    <div className="grid-fixed-demo-title">bottom</div>
    <Row align="bottom">
      <Col span="8" style={{ height: '100px', lineHeight: '100px' }}>
        col-8
      </Col>
      <Col span="8" style={{ height: '50px', lineHeight: '50px' }}>
        col-8
      </Col>
      <Col span="8" style={{ height: '150px', lineHeight: '150px' }}>
        col-8
      </Col>
    </Row>
    <div className="grid-fixed-demo-title">baseline</div>
    <Row align="baseline">
      <Col span="8" style={{ height: '100px', paddingTop: '20px', fontSize: '30px' }}>
        col-8
      </Col>
      <Col span="8" style={{ height: '50px', paddingTop: '20px', fontSize: '20px' }}>
        col-8
      </Col>
      <Col span="8" style={{ height: '150px', paddingTop: '20px', fontSize: '40px' }}>
        col-8
      </Col>
    </Row>
    <div className="grid-fixed-demo-title">stretch</div>
    <Row align="stretch" style={{ height: '150px' }}>
      <Col span="8">col-8</Col>
      <Col span="8">col-8</Col>
      <Col span="8">col-8</Col>
    </Row>
    <div className="grid-fixed-demo-title">override</div>
    <Row align="top">
      <Col align="bottom" span="8" style={{ height: '100px', lineHeight: '100px' }}>
        col-8
      </Col>
      <Col span="8" style={{ height: '50px', lineHeight: '50px' }}>
        col-8
      </Col>
      <Col span="8" style={{ height: '150px', lineHeight: '150px' }}>
        col-8
      </Col>
    </Row>
  </div>,
  mountNode
);

多列水平方向对齐方式 #

（不支持 IE9 浏览器）基于 Flex 的 justify-content 属性实现，在 Row 上设置 justify 属性，即可行内多列水平方向对齐方式：start（左对齐，默认），center（居中对齐），end（右对齐），space-between（两端对齐，项目之间的间隔都相），space-around（两侧的间隔相等，列之间的间隔比列与左右两端的间隔大一倍）。

import ReactDOM from 'react-dom';
import { Grid } from '@alifd/next';
const { Row, Col } = Grid;
ReactDOM.render(
  <div className="justify-demo">
    <div className="grid-fixed-demo-title">start</div>
    <Row justify="start">
      <Col span="4">col-4</Col>
      <Col span="4">col-4</Col>
      <Col span="4">col-4</Col>
    </Row>
    <div className="grid-fixed-demo-title">center</div>
    <Row justify="center">
      <Col span="4">col-4</Col>
      <Col span="4">col-4</Col>
      <Col span="4">col-4</Col>
    </Row>
    <div className="grid-fixed-demo-title">end</div>
    <Row justify="end">
      <Col span="4">col-4</Col>
      <Col span="4">col-4</Col>
      <Col span="4">col-4</Col>
    </Row>
    <div className="grid-fixed-demo-title">space-between</div>
    <Row justify="space-between">
      <Col span="4">col-4</Col>
      <Col span="4">col-4</Col>
      <Col span="4">col-4</Col>
    </Row>
    <div className="grid-fixed-demo-title">space-around</div>
    <Row justify="space-around">
      <Col span="4">col-4</Col>
      <Col span="4">col-4</Col>
      <Col span="4">col-4</Col>
    </Row>
  </div>,
  mountNode
);

自定义元素渲染类型 #

使用 component 来指定需要渲染的元素类型，默认为 div

无障碍键盘操作指南 #

默认 <Row> 和 <Col> 会加上 role="row" 和 role="gridcell", 但是为了完美的无障碍实现, 开发者还应该在外部容器加上 role="grid"。

API #

Grid #

Row #

参数	说明	类型	默认值
children	行内容	React.ReactNode	-
gutter	列间隔	string \| number	0
wrap	列在行中宽度溢出后是否换行	boolean	false
fixed	行在某一断点下宽度是否保持不变（默认行宽度随视口变化而变化）	boolean	false
fixedWidth	固定行的宽度为某一断点的宽度，不受视口影响而变动	BreakPoints	-
align	（不支持IE9浏览器）多列垂直方向对齐方式	'top' \| 'center' \| 'bottom' \| 'baseline' \| 'stretch'	-
justify	（不支持IE9浏览器）行内具有多余空间时的布局方式	'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around'	-
hidden	行在不同断点下的显示与隐藏	boolean \| string \| Array<BreakPoints>	-
component	指定以何种元素渲染该节点	string \| FunctionComponent<unknown> \| ComponentClass<unknown>	'div'

Row.Col #

参数	说明	类型	默认值
children	列内容	React.ReactNode	-
span	列宽度	string \| number	-
fixedSpan	固定列宽度	string \| number	-
offset	（不支持IE9浏览器）列偏移	string \| number	-
fixedOffset	（不支持IE9浏览器）固定列偏移，宽度值为20 * 栅格数<br><br>可选值:<br>1, 2, 3, ..., 28, 29, 30	string \| number	-
align	（不支持IE9浏览器）多列垂直方向对齐方式，可覆盖Row的align属性	'top' \| 'center' \| 'bottom' \| 'baseline' \| 'stretch'	-
hidden	列在不同断点下的显示与隐藏	boolean \| string \| Array<BreakPoints>	-
xxs	>=320px，响应式栅格	string \| number \| PointProps	-
xs	>=480px，响应式栅格	string \| number \| PointProps	-
s	>=720px，响应式栅格	string \| number \| PointProps	-
m	>=990px，响应式栅格	string \| number \| PointProps	-
l	>=1200px，响应式栅格	string \| number \| PointProps	-
xl	>=1500px，响应式栅格	string \| number \| PointProps	-
component	指定以何种元素渲染该节点，默认为 'div'	Ele \| (() => Ele) \| string	'div'