Grid - Semi Design Next

Overview

The grid system of layout, we define the external framework of information blocks based on row and column (col) to ensure that each area of the page can be robustly arranged.

Flex layout

Our grid system supports the Flex layout, allowing the horizontal alignment of child elements within the parent node - left, center, right, equal width, scattered arrangement. Between child elements and child elements, support top alignment, vertical center alignment, bottom alignment. At the same time, support the use of order To define the order of the elements.

Demos

How to import

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

Basic Usage

From stacking to horizontal arrangement.

Using a single set of Row and Col grid components, you can create a basic grid system. All Col must be placed in the Row.

col-24

col-12

col-8

col-6

Code

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 interval

The grid often needs to work with the interval. You can use Row's Gutter Properties, we recommend using (16 + 8n) px as a grid interval. (n is a natural number)

Vertical gutter can be in the form of an array. The first item of the array is horizontal gutter and the second item is vertical gutter.

If you want to support responsiveness, you can write {xs: 8, sm: 16, md: 24, lg: 32}.

Dark for content area, light for spacing

horizontal

col-6

vertical

col-6

Code

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

Code

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

Use Flex layout

Set type="flex" on Row to define a Flex layout. The justify values start, center, end, space-between and space-around define how the child elements are arranged in the parent node.

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

Code

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 subelements vertically aligned

Align Top

col-4

Align Center

col-4

Align Bottom

col-4

Code

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 element sorting

Change the sorting of elements through order of the Col.

col-4

col-3

col-2

col-1

Code

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

Responsive

Referring to Bootstrap's responsive design, preset six response sizes:xs, sm, md, lg, Xl, xxl.

xs is the base layer without a media query and applies at every screen width; sm and above override the smaller breakpoints step by step according to the viewport width.

In the object form, order, offset, push and pull set to 0 reset the value a smaller breakpoint set, for example md set to { offset: 0 }.

Col

Code

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 reference

Row

Props

Property	Description	Type	Default
align	Vertical alignment in flex layout: `top`, `middle` or `bottom`. Takes effect only when `type` is `flex`.	`'top' \| 'middle' \| 'bottom'`	-
children	The `Col` cells in the row.	`React.ReactNode`	-
className	Class name of the root element.	`string`	-
gutter	Grid gutter in pixels, a responsive object `{ xs, sm, md, lg, xl, xxl }`, or a `[horizontal, vertical]` pair. Defaults to `0`.	`Gutter \| [Gutter, Gutter]`	-
justify	Horizontal arrangement in flex layout: `start`, `end`, `center`, `space-around` or `space-between`. Defaults to `start`.	`'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'`	-
prefixCls	CSS class name prefix.	`string`	`"semi"`
ref	Reference to the root `div` element.	`Type`	-
style	Style of the root element.	`React.CSSProperties`	-
type	Layout mode: `flex`.	`'flex'`	-

Other native attributes (such as id, aria-* and data-*) land on the root <div> of Row.

Col

Props

Property	Description	Type	Default
children	Content of the cell.	`React.ReactNode`	-
className	Class name of the root element.	`string`	-
lg	Responsive grid for screens ≥992px, as a column count or a `{ span, offset, order, push, pull }` object.	`number \| ColSize`	-
md	Responsive grid for screens ≥768px, as a column count or a `{ span, offset, order, push, pull }` object.	`number \| ColSize`	-
offset	Number of columns to offset from the start side. No column can sit inside the offset. Defaults to `0`.	`number`	-
order	Column order. Takes effect in flex layout. Defaults to `0`.	`number`	-
prefixCls	CSS class name prefix.	`string`	`"semi"`
pull	Number of columns to move toward the start side. Defaults to `0`.	`number`	-
push	Number of columns to move toward the end side. Defaults to `0`.	`number`	-
ref	Reference to the root `div` element.	`Type`	-
sm	Responsive grid for screens ≥576px, as a column count or a `{ span, offset, order, push, pull }` object.	`number \| ColSize`	-
span	Number of columns the cell spans. 0 behaves like `display: none`.	`number`	-
style	Style of the root element.	`React.CSSProperties`	-
xl	Responsive grid for screens ≥1200px, as a column count or a `{ span, offset, order, push, pull }` object.	`number \| ColSize`	-
xs	Base-layer responsive grid. It applies at every screen width, as a column count or a `{ span, offset, order, push, pull }` object.	`number \| ColSize`	-
xxl	Responsive grid for screens ≥1600px, as a column count or a `{ span, offset, order, push, pull }` object.	`number \| ColSize`	-

Other native attributes (such as id, aria-* and data-*) land on the root <div> of Col.

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$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	槽宽度