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-solid';

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-solid';

export default function GridDemo() {
    return (
        <div class="grid">
            <Row>
                <Col span={24}>
                    <div class="col-content">col-24</div>
                </Col>
            </Row>
            <br />
            <Row>
                <Col span={12}>
                    <div class="col-content">col-12</div>
                </Col>
                <Col span={12}>
                    <div class="col-content">col-12</div>
                </Col>
            </Row>
            <br />
            <Row>
                <Col span={8}>
                    <div class="col-content">col-8</div>
                </Col>
                <Col span={8}>
                    <div class="col-content">col-8</div>
                </Col>
                <Col span={8}>
                    <div class="col-content">col-8</div>
                </Col>
            </Row>
            <br />
            <Row>
                <Col span={6}>
                    <div class="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div class="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div class="col-content">col-6</div>
                </Col>
                <Col span={6}>
                    <div class="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-solid';

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

Offset

col-8

col-6

col-12

Code

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

export default function GridDemo() {
    return (
        <div class="grid">
            <Row>
                <Col span={8}>
                    <div class="col-content">col-8</div>
                </Col>
                <Col span={8} offset={8}>
                    <div class="col-content">col-8</div>
                </Col>
            </Row>
            <br />
            <Row>
                <Col span={6} offset={6}>
                    <div class="col-content">col-6</div>
                </Col>
                <Col span={6} offset={6}>
                    <div class="col-content">col-6</div>
                </Col>
            </Row>
            <br />
            <Row>
                <Col span={12} offset={6}>
                    <div class="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-solid';

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

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

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

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

            <p>sub-element align full</p>
            <Row type="flex" justify="space-around">
                <Col span={4}>
                    <div class="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div class="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div class="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div class="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-solid';

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

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

            <p>Align Bottom</p>
            <Row type="flex" justify="space-between" align="bottom">
                <Col span={4}>
                    <div class="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div class="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div class="col-content">col-4</div>
                </Col>
                <Col span={4}>
                    <div class="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-solid';

export default function GridDemo() {
    return (
        <div class="grid">
            <Row type="flex">
                <Col span={6} order={4}>
                    <div class="col-content">col-4</div>
                </Col>
                <Col span={6} order={3}>
                    <div class="col-content">col-3</div>
                </Col>
                <Col span={6} order={2}>
                    <div class="col-content">col-2</div>
                </Col>
                <Col span={6} order={1}>
                    <div class="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-solid';

export default function GridDemo() {
    return (
        <div class="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 class="col-content">Col</div>
                </Col>
                <Col xs={20} sm={16} md={12} lg={8} xl={4}>
                    <div class="col-content">Col</div>
                </Col>
                <Col xs={2} sm={4} md={6} lg={8} xl={10}>
                    <div class="col-content">Col</div>
                </Col>
            </Row>
            <br />
            <Row>
                <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                    <div class="col-content">Col</div>
                </Col>
                <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                    <div class="col-content">Col</div>
                </Col>
                <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                    <div class="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'`	-
gutter	Grid gutter in pixels, a responsive object `{ xs, sm, md, lg, xl, xxl }`, or a `[horizontal, vertical]` pair.	`Gutter \| [Gutter, Gutter]`	-
justify	Horizontal arrangement in flex layout: start, end, center, space-around or space-between.	`'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'`	-
prefixCls	CSS class name prefix.	`string`	`"semi"`
type	Layout mode: flex.	`'flex'`	-

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

Col

Props

Property	Description	Type	Default
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.	`number`	-
order	Column order. Takes effect in flex layout.	`number`	-
prefixCls	CSS class name prefix.	`string`	`"semi"`
pull	Number of columns to move toward the start side.	`number`	-
push	Number of columns to move toward the end side.	`number`	-
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`	-
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`	-

class, style, ref and native attributes (such as id and aria-*) 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	槽宽度