demos

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

Grid 栅格

开发指南#

基本使用#

此栅格系统提供了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 的说明）。

无障碍#

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

<div role="grid">
    <Row><Col span={6}>1</Col><Col span={6}>2</Col><Col span={6}>3</Col><Col span={6}>4</Col></Row>
    <Row><Col span={6} offset={6}>1</Col><Col span={6} offset={6}>2</Col></Row>
</div>

API#

# 代码演示

# 基础布局

import { Grid } from '@alifd/next';

const { Row, Col } = Grid;

ReactDOM.render(
    <div className="basic-demo">
        <div className="demo-title">One</div>
        <Row>
            <Col span="24">col-24</Col>
        </Row>

        <div className="demo-title">Two</div>
        <Row>
            <Col span="12">col-12</Col>
            <Col span="12">col-12</Col>
        </Row>

        <div className="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="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="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="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);

.basic-demo .demo-title {
    margin-left: 20px;
}

.basic-demo .next-row {
    margin: 10px 0;
}

.basic-demo .next-col {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

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

# 固定宽度列

import { Grid } from '@alifd/next';

const { Row, Col } = Grid;

ReactDOM.render(
    <div className="mixin-demo">
        <div className="demo-title">Two-column layout, left column fixed, right column adaptive</div>
        <Row>
            <Col fixedSpan="16">col-fixed-16</Col>
            <Col>col</Col>
        </Row>

        <div className="demo-title">Two-column layout, right column fixed, left column adaptive</div>
        <Row>
            <Col>col</Col>
            <Col fixedSpan="16">col-fixed-16</Col>
        </Row>

        <div className="demo-title">Three-column layout, left column and right column fixed, middle column adaptive</div>
        <Row>
            <Col fixedSpan="8">col-fixed-8</Col>
            <Col>col</Col>
            <Col fixedSpan="8">col-fixed-8</Col>
        </Row>
    </div>, mountNode);

.mixin-demo .demo-title {
    margin-left: 20px;
}

.mixin-demo .next-row {
    margin: 10px 0;
}

.mixin-demo .next-col {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

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

# 列间距

import { Range, Grid } from '@alifd/next';

const { Row, Col } = Grid;

class Demo extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            gutter: 0
        };

        this.handleChange = this.handleChange.bind(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);

.gutter-demo .demo-title {
    margin-left: 20px;
}

.gutter-demo .next-row {
    margin: 10px 0;
}

.gutter-demo .demo-col-inset {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

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

# 溢出后是否换行

import { Grid } from '@alifd/next';

const { Row, Col } = Grid;

ReactDOM.render(
    <div className="wrap-demo">
        <div className="demo-title">No wrap</div>
        <Row>
            <Col span="6">col-6</Col>
            <Col span="6">col-6</Col>
            <Col span="6">col-6</Col>
            <Col span="8">col-8</Col>
        </Row>
        <div className="demo-title">Wrap</div>
        <Row wrap>
            <Col span="6">col-6</Col>
            <Col span="6">col-6</Col>
            <Col span="6">col-6</Col>
            <Col span="8">col-8</Col>
        </Row>
    </div>, mountNode);

.wrap-demo .demo-title {
    margin-left: 20px;
}

.wrap-demo .next-row {
    margin: 10px 0;
}

.wrap-demo .next-col {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

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

# 嵌套布局

import { Grid } from '@alifd/next';

const { Row, Col } = Grid;

ReactDOM.render(
    <div className="nest-demo">
        <Row className="demo-row">
            <Col span="10">
                <Row>
                    <Col span="6">
                        <div className="demo-col-inset">col-10-6</div>
                    </Col>
                    <Col span="18">
                        <div className="demo-col-inset">col-10-18</div>
                    </Col>
                </Row>
            </Col>
            <Col span="14">
                <Row>
                    <Col span="18">
                        <div className="demo-col-inset">col-14-18</div>
                    </Col>
                    <Col span="6">
                        <div className="demo-col-inset">col-14-6</div>
                    </Col>
                </Row>
            </Col>
        </Row>
    </div>, mountNode);

.nest-demo .demo-title {
    margin-left: 20px;
}

.nest-demo .demo-row {
    margin: 10px 0;
}

.nest-demo .demo-col-inset {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

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

# 响应式布局

import { Grid } from '@alifd/next';

const { Row, Col } = Grid;

ReactDOM.render(
    <div className="breakpoint-demo">
        <div className="demo-title">Resize browser to see how each column changes</div>
        <Row >
            <Col xs={12} s={8} m={6}>Col</Col>
            <Col xs={6} s={8} m={6}>Col</Col>
            <Col xs={6} s={8} m={12}>Col</Col>
        </Row>
    </div>, mountNode);

.breakpoint-demo .demo-title {
    margin-left: 20px;
}

.breakpoint-demo .next-row {
    margin: 10px 0;
}

.breakpoint-demo .next-col {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

# 显示与隐藏

import { Grid } from '@alifd/next';

const { Row, Col } = Grid;

ReactDOM.render(
    <div className="hidden-demo">
        <div className="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="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="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);

.hidden-demo .demo-title {
    margin-left: 20px;
}

.hidden-demo .next-row {
    margin: 10px 0;
}

.hidden-demo .next-col {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

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

# 设置行的宽度

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.removeListener('resize', this.handleResize);
    }

    render() {
        return (
            <div className="type-demo">
                <div className="demo-title">Default</div>
                <Row>
                    <Col>100%</Col>
                </Row>
                <div className="demo-title">Set fixed to true</div>
                <Row ref="fixedRow" fixed>
                    <Col ref="fixCol" />
                </Row>
                <div className="demo-title">Set fixedWidth to 's'</div>
                <Row fixedWidth="s">
                    <Col>720px</Col>
                </Row>
            </div>
        );
    }
}

ReactDOM.render(<Demo />, mountNode);

.type-demo .demo-title {
    margin-left: 20px;
}

.type-demo .next-row {
    margin: 10px 0;
}

.type-demo .next-col {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

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

# 偏移

import { Grid } from '@alifd/next';

const { Row, Col } = Grid;

ReactDOM.render(
    <div className="offset-demo">
        <div className="demo-title">Normal offset, set offset from 1 to 24</div>
        <Row>
            <Col offset="0">offset-0</Col>
        </Row>
        <Row>
            <Col offset="4">offset-4</Col>
        </Row>
        <Row>
            <Col offset="8">offset-8</Col>
        </Row>
        <Row>
            <Col offset="12">offset-12</Col>
        </Row>

        <div className="demo-title">Adaptive offset</div>
        <Row>
            <Col>col</Col>
            <Col offset="12">offset-12</Col>
        </Row>
    </div>,
    mountNode
);

.offset-demo .demo-title {
    margin-left: 20px;
}

.offset-demo .next-row {
    margin: 10px 0;
}

.offset-demo .next-col {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

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

# 固定宽度偏移

import { Grid } from '@alifd/next';

const { Row, Col } = Grid;

ReactDOM.render(
    <div className="offset-fixed-demo">
        <div className="demo-title">Normal offset, set offset from 1 to 30</div>
        <Row>
            <Col fixedOffset="0">offset-fixed-0</Col>
        </Row>
        <Row>
            <Col fixedOffset="4">offset-fixed-4</Col>
        </Row>
        <Row>
            <Col fixedOffset="8">offset-fixed-8</Col>
        </Row>
        <Row>
            <Col fixedOffset="12">offset-fixed-12</Col>
        </Row>

        <div className="demo-title">Adaptive offset</div>
        <Row>
            <Col>col</Col>
            <Col fixedOffset="12">offset-fixed-12</Col>
        </Row>
    </div>, mountNode
);

.offset-fixed-demo .demo-title {
    margin-left: 20px;
}

.offset-fixed-demo .next-row {
    margin: 10px 0;
}

.offset-fixed-demo .next-col {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

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

# 多列垂直方向对齐方式

import { Grid } from '@alifd/next';

const { Row, Col } = Grid;

ReactDOM.render(
    <div className="align-demo">
        <div className="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="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="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="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="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="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);

.align-demo .demo-title {
    margin-left: 20px;
}

.align-demo .next-row {
    margin: 10px 0;
}

.align-demo .next-col {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    line-height: 30px;
    text-align: center;
}

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

# 多列水平方向对齐方式

import { Grid } from '@alifd/next';

const { Row, Col } = Grid;

ReactDOM.render(
    <div className="justify-demo">
        <div className="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="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="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="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="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);

.justify-demo  .demo-title {
    margin-left: 20px;
}

.justify-demo  .next-row {
    margin: 10px 0;
}

.justify-demo .next-col {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

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

# 自定义元素渲染类型

import { Grid } from '@alifd/next';

const { Row, Col } = Grid;

ReactDOM.render(
    <div className="basic-demo">
        <div className="demo-title">Rendered as `ul` and `li`</div>
        <Row component="ul">
            <Col span="12" component="li">col-12</Col>
            <Col span="12" component="li">col-12</Col>
        </Row>
    </div>, mountNode);

.basic-demo ul {
    list-style: none;
    padding: 0;
}

.basic-demo .demo-title {
    margin-left: 20px;
}

.basic-demo .next-row {
    margin: 10px 0;
}

.basic-demo .next-col {
    border:1px solid #CCC;
    border-radius: 3px;
    background-color:#ECECEC;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

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

# API

Grid.Row#

参数	说明	类型	默认值
children	行内容	ReactNode	-
gutter	列间隔	String/Number	0
wrap	列在行中宽度溢出后是否换行	Boolean	false
fixed	行在某一断点下宽度是否保持不变（默认行宽度随视口变化而变化）	Boolean	false
fixedWidth	固定行的宽度为某一断点的宽度，不受视口影响而变动可选值: 'xxs'(320px) 'xs'(480px) 's'(720px) 'm'(990px) 'l'(1200px) 'xl'(1500px)	Enum	-
align	（不支持IE9浏览器）多列垂直方向对齐方式可选值: 'top'(顶部对齐) 'center'(居中对齐) 'bottom'(底部对齐) 'baseline'(按第一行文字基线对齐) 'stretch'(未设置高度或设为 auto，将占满整个容器的高度)	Enum	-
justify	（不支持IE9浏览器）行内具有多余空间时的布局方式可选值: 'start'(左对齐) 'center'(居中对齐) 'end'(右对齐) 'space-between'(两端对齐，列之间间距相等) 'space-around'(每列具有相同的左右间距，行两端间距是列间距的二分之一)	Enum	-
hidden	行在不同断点下的显示与隐藏可选值: true(在所有断点下隐藏) false(在所有断点下显示) 'xs'(在 xs 断点下隐藏） ['xxs', 'xs', 's', 'm', 'l', 'xl'](在 xxs, xs, s, m, l, xl 断点下隐藏）	Boolean/String/Array	-
component	指定以何种元素渲染该节点 - 默认为 'div'	String/Function	'div'

Grid.Col#

参数	说明	类型	默认值
children	列内容	ReactNode	-
span	列宽度可选值: 1, 2, 3, ..., 22, 23, 24	String/Number	-
fixedSpan	固定列宽度，宽度值为20 * 栅格数可选值: 1, 2, 3, ..., 28, 29, 30	String/Number	-
offset	（不支持IE9浏览器）列偏移可选值: 1, 2, 3, ..., 22, 23, 24	String/Number	-
fixedOffset	（不支持IE9浏览器）固定列偏移，宽度值为20 * 栅格数可选值: 1, 2, 3, ..., 28, 29, 30	String/Number	-
align	（不支持IE9浏览器）多列垂直方向对齐方式，可覆盖Row的align属性可选值: 'top', 'center', 'bottom', 'baseline', 'stretch'	Enum	-
hidden	列在不同断点下的显示与隐藏可选值: true(在所有断点下隐藏) false(在所有断点下显示) 'xs'(在 xs 断点下隐藏） ['xxs', 'xs', 's', 'm', 'l', 'xl'](在 xxs, xs, s, m, l, xl 断点下隐藏）	Boolean/String/Array	-
xxs	>=320px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象	String/Number/Object	-
xs	>=480px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象	String/Number/Object	-
s	>=720px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象	String/Number/Object	-
m	>=990px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象	String/Number/Object	-
l	>=1200px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象	String/Number/Object	-
xl	>=1500px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象	String/Number/Object	-
component	指定以何种元素渲染该节点，默认为 'div'	String/Function	'div'