栅格 - Semi Design Next

概述

布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。

弹性布局

我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。

代码演示

如何引入

import { Col, Row } from '@fibrous/semi-ui-react';

基础使用

从堆叠到水平排列。

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

col-24

col-12

col-8

col-6

代码

import { Col, Row } from '@fibrous/semi-ui-react';

export default function GridDemo() {
    return (
        <div className="grid">
            <Row>
                <Col span={24}>
                    <div className="col-content">col-24</div>
                </Col>
            </Row>
            <br />
            <Row>
                <Col span={12}>
                    <div className="col-content">col-12</div>
                </Col>
                <Col span={12}>
                    <div className="col-content">col-12</div>
                </Col>
            </Row>
            <br />
            <Row>
                <Col span={8}>
                    <div className="col-content">col-8</div>
                </Col>
                <Col span={8}>
                    <div className="col-content">col-8</div>
                </Col>
                <Col span={8}>
                    <div className="col-content">col-8</div>
                </Col>
            </Row>
            <br />
            <Row>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
            </Row>
        </div>
    );
}

Gutter 间隔

栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔。(n 是自然数)

垂直间隔可以使用数组形式，数组第一项为横向间隔，第二项为垂直间隔。

如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }

深色为内容物区域，浅色为间隔

horizontal

col-6

vertical

col-6

代码

import { Col, Row } from '@fibrous/semi-ui-react';

export default function GridDemo() {
    return (
        <div className="grid grid-gutter">
            <p>horizontal</p>
            <hr />
            <Row gutter={16}>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
            </Row>
            <p>vertical</p>
            <hr />
            <Row gutter={[16, 24]}>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div className="col-content">col-6</div>
                </Col>
            </Row>
        </div>
    );
}

Offset 偏移

col-8

col-6

col-12

代码

import { Col, Row } from '@fibrous/semi-ui-react';

export default function GridDemo() {
    return (
        <div className="grid">
            <Row>
                <Col span={8}>
                    <div className="col-content">col-8</div>
                </Col>
                <Col span={8} offset={8}>
                    <div className="col-content">col-8</div>
                </Col>
            </Row>
            <br />
            <Row>
                <Col span={6} offset={6}>
                    <div className="col-content">col-6</div>
                </Col>
                <Col span={6} offset={6}>
                    <div className="col-content">col-6</div>
                </Col>
            </Row>
            <br />
            <Row>
                <Col span={12} offset={6}>
                    <div className="col-content">col-12</div>
                </Col>
            </Row>
        </div>
    );
}

Flex 布局

给 Row 设置 type="flex" 定义 Flex 布局，justify 取不同的值 start、center、end、space-between、space-around，分别定义子元素在父节点里面的排版方式。

sub-element align left

col-4

sub-element align center

col-4

sub-element align right

col-4

sub-element monospaced arrangement

col-4

sub-element align full

col-4

代码

import { Col, Row } from '@fibrous/semi-ui-react';

export default function GridDemo() {
    return (
        <div className="grid">
            <p>sub-element align left</p>
            <Row type="flex" justify="start">
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
            </Row>

            <p>sub-element align center</p>
            <Row type="flex" justify="center">
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
            </Row>

            <p>sub-element align right</p>
            <Row type="flex" justify="end">
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
            </Row>

            <p>sub-element monospaced arrangement</p>
            <Row type="flex" justify="space-between">
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
            </Row>

            <p>sub-element align full</p>
            <Row type="flex" justify="space-around">
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
            </Row>
        </div>
    );
}

Flex 子元素垂直对齐

Align Top

col-4

Align Center

col-4

Align Bottom

col-4

代码

import { Col, Row } from '@fibrous/semi-ui-react';

export default function GridDemo() {
    return (
        <div className="grid grid-flex">
            <p>Align Top</p>
            <Row type="flex" justify="center" align="top">
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
            </Row>

            <p>Align Center</p>
            <Row type="flex" justify="space-around" align="middle">
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
            </Row>

            <p>Align Bottom</p>
            <Row type="flex" justify="space-between" align="bottom">
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div className="col-content">col-4</div>
                </Col>
            </Row>
        </div>
    );
}

Flex 元素排序

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

col-4

col-3

col-2

col-1

代码

import { Col, Row } from '@fibrous/semi-ui-react';

export default function GridDemo() {
    return (
        <div className="grid">
            <Row type="flex">
                <Col span={6} order={4}>
                    <div className="col-content">col-4</div>
                </Col>
                <Col span={6} order={3}>
                    <div className="col-content">col-3</div>
                </Col>
                <Col span={6} order={2}>
                    <div className="col-content">col-2</div>
                </Col>
                <Col span={6} order={1}>
                    <div className="col-content">col-1</div>
                </Col>
            </Row>
        </div>
    );
}

响应式

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

xs 是不带媒体查询的基础层，在所有屏幕宽度都生效；sm 及以上按视口宽度逐级覆盖更小的断点。

对象写法中 order、offset、push、pull 设为 0 会重置更小断点设置的值，例如 md 设为 { offset: 0 }。

Col

代码

import { Col, Row } from '@fibrous/semi-ui-react';

export default function GridDemo() {
    return (
        <div className="grid">
            <Row gutter={{ xs: 16, sm: 16, md: 16, lg: 24, xl: 24, xxl: 24 }}>
                <Col xs={2} sm={4} md={6} lg={8} xl={10}>
                    <div className="col-content">Col</div>
                </Col>
                <Col xs={20} sm={16} md={12} lg={8} xl={4}>
                    <div className="col-content">Col</div>
                </Col>
                <Col xs={2} sm={4} md={6} lg={8} xl={10}>
                    <div className="col-content">Col</div>
                </Col>
            </Row>
            <br />
            <Row>
                <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                    <div className="col-content">Col</div>
                </Col>
                <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                    <div className="col-content">Col</div>
                </Col>
                <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                    <div className="col-content">Col</div>
                </Col>
            </Row>
        </div>
    );
}

API 参考

Row

Props

属性	说明	类型	默认值
align	flex 布局下的垂直对齐方式，可选 `top`、`middle` 或 `bottom`，仅在 `type` 为 `flex` 时生效。	`'top' \| 'middle' \| 'bottom'`	-
children	行内的 `Col` 栅格。	`React.ReactNode`	-
className	根元素的类名。	`string`	-
gutter	栅格间隔，可以是像素值、响应式对象 `{ xs, sm, md, lg, xl, xxl }`，或 `[水平, 垂直]` 数组，未设置时为 `0`。	`Gutter \| [Gutter, Gutter]`	-
justify	flex 布局下的水平排列方式，可选 `start`、`end`、`center`、`space-around` 或 `space-between`，未设置时为 `start`。	`'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'`	-
prefixCls	CSS 类名前缀。	`string`	`"semi"`
ref	根元素（`div`）的引用。	`Type`	-
style	根元素的样式。	`React.CSSProperties`	-
type	布局模式，可选 `flex`。	`'flex'`	-

其他原生属性（如 id、aria-*、data-*）落在 Row 的根 <div> 上。

Col

Props

属性	说明	类型	默认值
children	栅格内的内容。	`React.ReactNode`	-
className	根元素的类名。	`string`	-
lg	屏幕宽度 ≥992px 时生效的响应式栅格，可为栅格数或 `{ span, offset, order, push, pull }` 对象。	`number \| ColSize`	-
md	屏幕宽度 ≥768px 时生效的响应式栅格，可为栅格数或 `{ span, offset, order, push, pull }` 对象。	`number \| ColSize`	-
offset	栅格起始侧（从左到右排版时为左侧）的间隔格数，间隔内不可以有栅格，未设置时为 `0`。	`number`	-
order	栅格顺序，flex 布局模式下有效，未设置时为 `0`。	`number`	-
prefixCls	CSS 类名前缀。	`string`	`"semi"`
pull	栅格向起始侧（从左到右排版时为左侧）移动的格数，未设置时为 `0`。	`number`	-
push	栅格向末尾侧（从左到右排版时为右侧）移动的格数，未设置时为 `0`。	`number`	-
ref	根元素（`div`）的引用。	`Type`	-
sm	屏幕宽度 ≥576px 时生效的响应式栅格，可为栅格数或 `{ span, offset, order, push, pull }` 对象。	`number \| ColSize`	-
span	栅格占位格数，为 0 时相当于 `display: none`。	`number`	-
style	根元素的样式。	`React.CSSProperties`	-
xl	屏幕宽度 ≥1200px 时生效的响应式栅格，可为栅格数或 `{ span, offset, order, push, pull }` 对象。	`number \| ColSize`	-
xs	基础层响应式栅格，所有屏幕宽度都生效，可为栅格数或 `{ span, offset, order, push, pull }` 对象。	`number \| ColSize`	-
xxl	屏幕宽度 ≥1600px 时生效的响应式栅格，可为栅格数或 `{ span, offset, order, push, pull }` 对象。	`number \| ColSize`	-

其他原生属性（如 id、aria-*、data-*）落在 Col 的根 <div> 上。

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$width-grid_screen-sm	576px	小尺寸设备 - 平板
$width-grid_screen-sm-min	$width-grid_screen-sm
$width-grid_screen-md	768px	中尺寸设备 - 水平平板
$width-grid_screen-md-min	$width-grid_screen-md
$width-grid_screen-lg	992px	大尺寸设备 - 小尺寸桌面端
$width-grid_screen-lg-min	$width-grid_screen-lg
$width-grid_screen-xl	1200px	超大尺寸设备 - 桌面端
$width-grid_screen-xl-min	$width-grid_screen-xl
$width-grid_screen-xxl	1600px	超大尺寸设备 - 桌面端 HD
$width-grid_screen-xxl-min	$width-grid_screen-xxl
$width-grid_columns	24	栅格宽度
$width-grid_gutter	0	槽宽度