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

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';
</script>

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.

Numeric and object props such as span, offset, gutter and xs must be bound with :, for example :span="12"; a plain string is not converted to a number.

col-24

col-12

col-8

col-6

Code

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';
</script>

<template>
    <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>
</template>

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

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div class="grid grid-gutter">
        <p>horizontal</p>
        <hr />
        <Row :gutter="16">
            <Col v-for="i in 8" :key="i" :span="6">
                <div class="col-content">col-6</div>
            </Col>
        </Row>
        <p>vertical</p>
        <hr />
        <Row :gutter="[16, 24]">
            <Col v-for="i in 8" :key="i" :span="6">
                <div class="col-content">col-6</div>
            </Col>
        </Row>
    </div>
</template>

Offset

col-8

col-6

col-12

Code

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div class="grid">
        <Row>
            <Col :span="8">
                <div class="col-content">col-8</div>
            </Col>
            <Col :offset="8" :span="8">
                <div class="col-content">col-8</div>
            </Col>
        </Row>
        <br />
        <Row>
            <Col :offset="6" :span="6">
                <div class="col-content">col-6</div>
            </Col>
            <Col :offset="6" :span="6">
                <div class="col-content">col-6</div>
            </Col>
        </Row>
        <br />
        <Row>
            <Col :offset="6" :span="12">
                <div class="col-content">col-12</div>
            </Col>
        </Row>
    </div>
</template>

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

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';

    const rows = [
        { title: 'sub-element align left', justify: 'start' },
        { title: 'sub-element align center', justify: 'center' },
        { title: 'sub-element align right', justify: 'end' },
        { title: 'sub-element monospaced arrangement', justify: 'space-between' },
        { title: 'sub-element align full', justify: 'space-around' },
    ] as const;
</script>

<template>
    <div class="grid">
        <template v-for="row in rows" :key="row.title">
            <p>{{ row.title }}</p>
            <Row :justify="row.justify" type="flex">
                <Col v-for="i in 4" :key="i" :span="4">
                    <div class="col-content">col-4</div>
                </Col>
            </Row>
        </template>
    </div>
</template>

Flex subelements vertically aligned

Align Top

col-4

Align Center

col-4

Align Bottom

col-4

Code

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';

    const rows = [
        { title: 'Align Top', justify: 'center', align: 'top' },
        { title: 'Align Center', justify: 'space-around', align: 'middle' },
        { title: 'Align Bottom', justify: 'space-between', align: 'bottom' },
    ] as const;
</script>

<template>
    <div class="grid grid-flex">
        <template v-for="row in rows" :key="row.title">
            <p>{{ row.title }}</p>
            <Row :align="row.align" :justify="row.justify" type="flex">
                <Col v-for="i in 4" :key="i" :span="4">
                    <div class="col-content">col-4</div>
                </Col>
            </Row>
        </template>
    </div>
</template>

Flex element sorting

Change the sorting of elements through order of the Col.

col-4

col-3

col-2

col-1

Code

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div class="grid">
        <Row type="flex">
            <Col :order="4" :span="6">
                <div class="col-content">col-4</div>
            </Col>
            <Col :order="3" :span="6">
                <div class="col-content">col-3</div>
            </Col>
            <Col :order="2" :span="6">
                <div class="col-content">col-2</div>
            </Col>
            <Col :order="1" :span="6">
                <div class="col-content">col-1</div>
            </Col>
        </Row>
    </div>
</template>

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

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div class="grid">
        <Row :gutter="{ xs: 16, sm: 16, md: 16, lg: 24, xl: 24, xxl: 24 }">
            <Col :lg="8" :md="6" :sm="4" :xl="10" :xs="2">
                <div class="col-content">Col</div>
            </Col>
            <Col :lg="8" :md="12" :sm="16" :xl="4" :xs="20">
                <div class="col-content">Col</div>
            </Col>
            <Col :lg="8" :md="6" :sm="4" :xl="10" :xs="2">
                <div class="col-content">Col</div>
            </Col>
        </Row>
        <br />
        <Row>
            <Col :lg="{ span: 6, offset: 2 }" :xs="{ span: 5, offset: 1 }">
                <div class="col-content">Col</div>
            </Col>
            <Col :lg="{ span: 6, offset: 2 }" :xs="{ span: 11, offset: 1 }">
                <div class="col-content">Col</div>
            </Col>
            <Col :lg="{ span: 6, offset: 2 }" :xs="{ span: 5, offset: 1 }">
                <div class="col-content">Col</div>
            </Col>
        </Row>
    </div>
</template>

API reference

Row

Props

Property	Description	Type	Default
type	Layout mode: flex.	`"flex"`	`semiGlobalDefault("Row", "type")`
align	Vertical alignment in flex layout: top, middle or bottom.	`"top" \| "bottom" \| "middle"`	`semiGlobalDefault("Row", "align")`
justify	Horizontal arrangement in flex layout: start, end, center, space-around or space-between.	`"start" \| "end" \| "center" \| "space-around" \| "space-between"`	`semiGlobalDefault("Row", "justify")`
gutter	Grid gutter in pixels, a responsive object `{ xs, sm, md, lg, xl, xxl }`, or a `[horizontal, vertical]` pair.	`Gutter \| [Gutter, Gutter]`	`semiDefault("Row", "gutter", 0)`
prefixCls	CSS class name prefix.	`string`	`semiDefault("Row", "prefixCls", cssClasses.PREFIX)`

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
default	Col components in the row.	`any`

Exposes

Name	Description	Type
None

class, style and native attributes passed as attrs land on the root element of Row.

Col

Props

Property	Description	Type	Default
span	Number of columns the cell spans. 0 behaves like display: none.	`number`	`semiGlobalDefault("Col", "span")`
order	Column order. Takes effect in flex layout.	`number`	`semiGlobalDefault("Col", "order")`
offset	Number of columns to offset from the start side. No column can sit inside the offset.	`number`	`semiGlobalDefault("Col", "offset")`
push	Number of columns to move toward the end side.	`number`	`semiGlobalDefault("Col", "push")`
pull	Number of columns to move toward the start side.	`number`	`semiGlobalDefault("Col", "pull")`
prefixCls	CSS class name prefix.	`string`	`semiDefault("Col", "prefixCls", cssClasses.PREFIX)`
xs	Base-layer responsive grid. It applies at every screen width, as a column count or an object.	`number \| ColSize`	`semiGlobalDefault("Col", "xs")`
sm	Responsive grid for screens ≥576px, as a column count or an object.	`number \| ColSize`	`semiGlobalDefault("Col", "sm")`
md	Responsive grid for screens ≥768px, as a column count or an object.	`number \| ColSize`	`semiGlobalDefault("Col", "md")`
lg	Responsive grid for screens ≥992px, as a column count or an object.	`number \| ColSize`	`semiGlobalDefault("Col", "lg")`
xl	Responsive grid for screens ≥1200px, as a column count or an object.	`number \| ColSize`	`semiGlobalDefault("Col", "xl")`
xxl	Responsive grid for screens ≥1600px, as a column count or an object.	`number \| ColSize`	`semiGlobalDefault("Col", "xxl")`

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
default	Content of the column.	`any`

Exposes

Name	Description	Type
None

class, style and native attributes passed as attrs land on the root element of Col; a custom class comes after the component's own class names.

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	槽宽度