Grid 栅格

通过基础的 24 分栏，迅速简便地创建布局。

• 组件默认使用了 Flex 布局。
• 支持使用 order 来定义元素的排列顺序。

基本用法

从堆叠到水平排列。
使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。
并通过 Col 组件的 span 属性实现24等份自由地组合布局。

col

col-12

col-12

col-8

col-8

col-8

col-6

col-6

col-6

col-6

col-4

col-4

col-4

col-4

col-4

col-4

• 复制代码
• 显示代码

分栏间隔

分栏之间的间隔，需要在 Col 中使用 gutter 属性，

col-6

col-6

col-6

col-6

• 复制代码
• 显示代码

行间隔

每当（Col）自动换行后，Col 顶部与底部是紧密贴合的。如果想使 Col 换行后使行之间产生空隙，需要在 Rol 中使用 gap 属性。

col-6

col-6

col-6

col-6

col-4

col-20

col-8

col-16

• 复制代码
• 显示代码

偏移

指定列偏移量。通过制定（Col）组件的 offset 属性可以指定分栏偏移的栏数。

col-6

col-6

col-6

col-12

col-9

col-4

col-8

• 复制代码
• 显示代码

对齐

默认使用 flex 布局来对分栏进行灵活的对齐。
可以通过 justify 属性来定义子元素的排版方式，与 justify-content🔗 一致。

col-6

col-6

col-6

col-6

col-6

col-6

col-6

col-6

• 复制代码
• 显示代码

排序

通过 order 来改变元素的排序。

第1个栅格
order:2

第2个栅格
order:4

第3个栅格
order:1

第4个栅格
order:3

• 复制代码
• 显示代码

Row 属性

属性	说明	类型（可选值）	默认值
gutter	栅格间距	number	0
gap	行与行间距	number	0
justify	对齐	与 justify-content🔗 一致	-

Col 属性

属性	说明	类型（可选值）	默认值
span	栅格占据的列数	number	24
order	栅格顺序，flex 布局模式下有效	number	-
offset	栅格左侧的间隔栏数	number	-