Grid - Svelte - 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 lang="ts">
    import { Col, Row } from '@fibrae/semi-ui-svelte';
</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.

col-24

col-12

col-8

col-6

Code

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

<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

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

    const cols = [1, 2, 3, 4, 5, 6, 7, 8];
</script>

<div class="grid grid-gutter">
    <p>horizontal</p>
    <hr />
    <Row gutter={16}>
        {#each cols as col (col)}
            <Col span={6}>
                <div class="col-content">col-6</div>
            </Col>
        {/each}
    </Row>
    <p>vertical</p>
    <hr />
    <Row gutter={[16, 24]}>
        {#each cols as col (col)}
            <Col span={6}>
                <div class="col-content">col-6</div>
            </Col>
        {/each}
    </Row>
</div>

Offset

col-8

col-6

col-12

Code

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

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

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 lang="ts">
    import { Col, Row } from '@fibrae/semi-ui-svelte';

    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;
    const cols = [1, 2, 3, 4];
</script>

<div class="grid">
    {#each rows as row (row.title)}
        <p>{row.title}</p>
        <Row justify={row.justify} type="flex">
            {#each cols as col (col)}
                <Col span={4}>
                    <div class="col-content">col-4</div>
                </Col>
            {/each}
        </Row>
    {/each}
</div>

Flex subelements vertically aligned

Align Top

col-4

Align Center

col-4

Align Bottom

col-4

Code

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

    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;
    const cols = [1, 2, 3, 4];
</script>

<div class="grid grid-flex">
    {#each rows as row (row.title)}
        <p>{row.title}</p>
        <Row align={row.align} justify={row.justify} type="flex">
            {#each cols as col (col)}
                <Col span={4}>
                    <div class="col-content">col-4</div>
                </Col>
            {/each}
        </Row>
    {/each}
</div>

Flex element sorting

Change the sorting of elements through order of the Col.

col-4

col-3

col-2

col-1

Code

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

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

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 lang="ts">
    import { Col, Row } from '@fibrae/semi-ui-svelte';
</script>

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

API reference

Row

Props

Property	Description	Type	Default
align	Vertical alignment in flex layout: top, middle or bottom.	`'top' \| 'middle' \| 'bottom'`	-
children	Col components in the row.	`Snippet`	-
gutter	Grid gutter in pixels, a responsive object `{ xs, sm, md, lg, xl, xxl }`, or a `[horizontal, vertical]` pair.	`Gutter \| [Gutter, Gutter]`	`0`
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 and native attributes land on the root <div> of Row; the style string comes after the gutter variables, so your value wins.

Col

Props

Property	Description	Type	Default
children	Content of the column.	`Snippet`	-
lg	Responsive grid for screens ≥992px, as a column count or an object.	`number \| ColSize`	-
md	Responsive grid for screens ≥768px, as a column count or an 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 an 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 an object.	`number \| ColSize`	-
xs	Base-layer responsive grid. It applies at every screen width, as a column count or an object.	`number \| ColSize`	-
xxl	Responsive grid for screens ≥1600px, as a column count or an object.	`number \| ColSize`	-

class, style and native attributes 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	槽宽度