Grid 栅格

24 栅格系统。

概述

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

弹性布局

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

代码演示

如何引入

import { Col, Row } from '@kousum/semi-ui-vue';

基础使用

从堆叠到水平排列。

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

0px x 0px

GridBase.vue

tsconfig.json

Import Map

xxxxxxxxxx

29

 

1

<script setup lang="ts">

2

import { Row, Col } from '@kousum/semi-ui-vue';

3

</script>

4

<template>

5

  <div class="grid">

6

    <Row>

7

      <Col :span="24"><div class="col-content">col-24</div></Col>

8

    </Row>

9

    <br />

10

    <Row>

11

      <Col :span="12"><div class="col-content">col-12</div></Col>

12

      <Col :span="12"><div class="col-content">col-12</div></Col>

13

    </Row>

14

    <br />

15

    <Row>

16

      <Col :span="8"><div class="col-content">col-8</div></Col>

17

      <Col :span="8"><div class="col-content">col-8</div></Col>

18

      <Col :span="8"><div class="col-content">col-8</div></Col>

19

    </Row>

20

    <br />

21

    <Row>

22

      <Col :span="6"><div class="col-content">col-6</div></Col>

23

      <Col :span="6"><div class="col-content">col-6</div></Col>

Show Error

Auto Save

Gutter 间隔

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

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

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

从1.11.0版本起支持数组形式的垂直间隔

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

0px x 0px

GutterInterval.vue

tsconfig.json

Import Map

xxxxxxxxxx

67

 

1

<script setup lang="ts">

2

import { Row, Col } from '@kousum/semi-ui-vue';

3

</script>

4

​

5

<template>

6

  <div class="grid grid-gutter">

7

    <p>horizontal</p>

8

    <hr />

9

    <Row :gutter="16">

10

      <Col :span="6">

11

        <div class="col-content">col-6</div>

12

      </Col>

13

      <Col :span="6">

14

        <div class="col-content">col-6</div>

15

      </Col>

16

      <Col :span="6">

17

        <div class="col-content">col-6</div>

18

      </Col>

19

      <Col :span="6">

20

        <div class="col-content">col-6</div>

21

      </Col>

22

      <Col :span="6">

23

        <div class="col-content">col-6</div>

24

      </Col>

25

      <Col :span="6">

26

        <div class="col-content">col-6</div>

27

      </Col>

28

      <Col :span="6">

Show Error

Auto Save

```

Offset 偏移

0px x 0px

Offset.vue

tsconfig.json

Import Map

xxxxxxxxxx

35

 

1

<script setup lang="ts">

2

import { Row, Col } from '@kousum/semi-ui-vue';

3

​

4

</script>

5

​

6

<template>

7

  <div class="grid">

8

    <Row>

9

      <Col :span="8"><div class="col-content">col-8</div></Col>

10

      <Col :span="8" :offset="8">

11

        <div class="col-content">col-8</div>

12

      </Col>

13

    </Row>

14

    <br/>

15

    <Row>

16

      <Col :span="6" :offset="6">

17

        <div class="col-content">col-6</div>

18

      </Col>

19

      <Col :span="6" :offset="6">

20

        <div class="col-content">col-6</div>

Show Error

Auto Save

Flex 布局

使用 row-flex 定义 Flex 布局，其子元素根据不同的值 start,center,end,space-between,space-around，分别定义其在父节点里面的排版方式。

0px x 0px

Flex.vue

tsconfig.json

Import Map

xxxxxxxxxx

52

 

1

<script setup lang="ts">

2

import { Row, Col } from '@kousum/semi-ui-vue';

3

</script>

4

​

5

<template>

6

  <div class="grid">

7

    <p>sub-element align left</p>

8

    <Row type="flex" justify="start">

9

      <Col :span="4"><div class="col-content">col-4</div></Col>

10

      <Col :span="4"><div class="col-content">col-4</div></Col>

11

      <Col :span="4"><div class="col-content">col-4</div></Col>

12

      <Col :span="4"><div class="col-content">col-4</div></Col>

13

    </Row>

14

​

15

    <p>sub-element align center</p>

16

    <Row type="flex" justify="center">

17

      <Col :span="4"><div class="col-content">col-4</div></Col>

18

      <Col :span="4"><div class="col-content">col-4</div></Col>

19

      <Col :span="4"><div class="col-content">col-4</div></Col>

20

      <Col :span="4"><div class="col-content">col-4</div></Col>

21

    </Row>

22

​

23

    <p>sub-element align right</p>

24

    <Row type="flex" justify="end">

25

      <Col :span="4"><div class="col-content">col-4</div></Col>

26

      <Col :span="4"><div class="col-content">col-4</div></Col>

27

      <Col :span="4"><div class="col-content">col-4</div></Col>

28

      <Col :span="4"><div class="col-content">col-4</div></Col>

29

    </Row>

30

​

31

    <p>sub-element monospaced arrangement</p>

32

    <Row type="flex" justify="space-between">

33

      <Col :span="4"><div class="col-content">col-4</div></Col>

Show Error

Auto Save

Flex 子元素垂直对齐

0px x 0px

FlexJustify.vue

tsconfig.json

Import Map

xxxxxxxxxx

34

 

1

<script setup lang="ts">

2

import { Row, Col } from '@kousum/semi-ui-vue';

3

</script>

4

​

5

<template>

6

  <div class="grid grid-flex">

7

    <p>Align Top</p>

8

    <Row type="flex" justify="center" align="top">

9

      <Col :span="4"><div class="col-content" :value="100">col-4</div></Col>

10

      <Col :span="4"><div class="col-content" :value="50">col-4</div></Col>

11

      <Col :span="4"><div class="col-content" :value="120">col-4</div></Col>

12

      <Col :span="4"><div class="col-content" :value="80">col-4</div></Col>

13

    </Row>

14

​

15

    <p>Align Center</p>

16

    <Row type="flex" justify="space-around" align="middle">

17

      <Col :span="4"><div class="col-content" :value="100">col-4</div></Col>

18

      <Col :span="4"><div class="col-content" :value="50">col-4</div></Col>

19

      <Col :span="4"><div class="col-content" :value="120">col-4</div></Col>

20

      <Col :span="4"><div class="col-content" :value="80">col-4</div></Col>

Show Error

Auto Save

Flex 元素排序

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

0px x 0px

FlexOder.vue

tsconfig.json

Import Map

xxxxxxxxxx

17

 

1

<script setup lang="ts">

2

import { Row, Col } from '@kousum/semi-ui-vue';

3

</script>

4

​

5

<template>

6

  <div class="grid">

7

    <Row type="flex">

8

      <Col :span="6" :order="4"><div class="col-content">col-4</div></Col>

9

      <Col :span="6" :order="3"><div class="col-content">col-3</div></Col>

10

      <Col :span="6" :order="2"><div class="col-content">col-2</div></Col>

11

      <Col :span="6" :order="1"><div class="col-content">col-1</div></Col>

12

    </Row>

13

  </div>

14

</template>

15

​

16

<style scoped></style>

17

​

Show Error

Auto Save

响应式

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

0px x 0px

FlexReact.vue

tsconfig.json

Import Map

xxxxxxxxxx

22

 

1

<script setup lang="ts">

2

import { Row, Col } from '@kousum/semi-ui-vue';

3

</script>

4

​

5

<template>

6

  <div class="grid">

7

    <Row :gutter="{ xs: 16, sm: 16, md: 16, lg: 24, xl: 24, xxl: 24 }">

8

      <Col :xs="2" :sm="4" :md="6" :lg="8" :xl="10"><div class="col-content">Col</div></Col>

9

      <Col :xs="20" :sm="16" :md="12" :lg="8" :xl="4"><div class="col-content">Col</div></Col>

10

      <Col :xs="2" :sm="4" :md="6" :lg="8" :xl="10"><div class="col-content">Col</div></Col>

11

    </Row>

12

    <br />

13

    <Row>

14

      <Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="col-content">Col</div></Col>

15

      <Col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="col-content">Col</div></Col>

16

      <Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="col-content">Col</div></Col>

17

    </Row>

18

  </div>

19

</template>

20

​

Show Error

Auto Save

API 参考

Row

属性	说明	类型	默认值
align	flex 布局下的垂直对齐方式：top middle bottom	string
className	类名	string
gutter	栅格间隔，可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24} 从1.11.0版本起支持垂直间隔	number|object|Array<number|object>
justify	flex 布局下的水平排列方式：start end center space-around space-between	string	start
style	自定义样式	CSSProperties
type	布局模式，可选 flex，现代浏览器 下有效	string

Col

属性	说明	类型	默认值
lg	≥992px 响应式栅格，可为栅格数或对象配置	number|object	-
md	≥768px 响应式栅格，可为栅格数或对象配置	number|object	-
offset	栅格左侧的间隔格数，间隔内不可以有栅格	number	0
order	栅格顺序，flex 布局模式下有效	number	0
pull	栅格向左移动格数	number	0
push	栅格向右移动格数	number	0
sm	≥575px 响应式栅格，可为栅格数或对象配置	number|object	-
span	栅格占位格数，为 0 时相当于 display: none	number	-
xl	≥1200px 响应式栅格，可为栅格数或对象配置	number|object	-
xs	<576px 响应式栅格，可为栅格数或对象配置	number|object	-
xxl	≥1600px 响应式栅格，可为栅格数或对象配置	number|object	-

设计变量

width

变量	默认值	用法
$width-grid_screen-xs	480px	超小尺寸设备 - 手机
$width-grid_screen-xs-min	$width-grid_screen-xs
$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

显示第 1 条-第 10 条，共 19 条

• 1
• 2