Grid 栅格

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

基本使用

此栅格系统提供了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)。 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

Grid.Row

Grid.Col

代码示例

基础布局

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

查看源码在线预览

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 的 fixedSpan 属性来指定某列为固定宽度列，其宽度的计算方式为 20 * fixedSpan。

查看源码在线预览

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;
}

列间距

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

查看源码在线预览

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;
}

溢出后是否换行

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

查看源码在线预览

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;
}

嵌套布局

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

查看源码在线预览

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;
}

响应式布局

查看源码在线预览

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;
}

设置行的宽度

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

查看源码在线预览

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;
}

偏移

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

查看源码在线预览

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

查看源码在线预览

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;
}

自定义元素渲染类型

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

查看源码在线预览

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;
}

相关区块

暂无相关区块