栅格 Grid

其他属性的响应式

span, offset, order 属性可以内嵌到 xs, sm, md, lg, xl, xxl 对象中使用。比如 :xs="8" 相当于 :xs="{ span: 8 }"。

响应式布局

预置六种响应尺寸, 分别为 xs, sm, md, lg, xl, xxl。

基本用法

展示了最基本的 24 等分应用。

垂直布局

通过 align 来进行垂直布局。

水平布局

通过 justify 来进行水平布局。

Flex 用法

通过设置 Col 组件的 flex 属性，可以任意配置 flex 布局。

响应式的 Grid 布局

Grid 组件的响应式配置格式为 { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }。

Grid 布局

基于 CSS 的 Grid 布局实现的布局组件，支持折叠，并且可以设置后缀节点，后缀节点会显示在一行的结尾。

区块间隔

通过在 Row 上指定 gutter 可以增加栅格的区域间隔。

栅格偏移

指定 offset 可以对栅格进行平移操作。

排序

通过 order 来进行元素排序。

API

`<row>` Props

参数名	描述	类型	默认值	版本
gutter	栅格间隔，单位是`px` 栅格间隔。可传入响应式对象写法 { xs: 4, sm: 6, md: 12}，传入数组 [ 水平间距，垂直间距 ] 来设置两个方向。	`number\| ResponsiveValue\| [number \| ResponsiveValue, number \| ResponsiveValue]`	`0`
justify	水平对齐方式 (`justify-content`)	`'start' \| 'center' \| 'end' \| 'space-around' \| 'space-between'`	`'start'`
align	竖直对齐方式 ( `align-items` )	`'start' \| 'center' \| 'end' \| 'stretch'`	`'start'`
div	开启这个选项`Row`和`Col`都会被当作div而不会附带任何Grid相关的类和样式	`boolean`	`false`
wrap	`Col` 是否支持换行	`boolean`	`true`	2.13.0

`<col>` Props

参数名	描述	类型	默认值	版本
span	栅格占位格数	`number`	`24`
offset	栅格左侧的间隔格数，间隔内不可以有栅格	`number`	`-`
order	对元素进行排序	`number`	`-`
xs	< 576px 响应式栅格	`number \| { [key: string]: any }`	`-`
sm	>= 576px 响应式栅格	`number \| { [key: string]: any }`	`-`
md	>= 768px 响应式栅格	`number \| { [key: string]: any }`	`-`
lg	>= 992px 响应式栅格	`number \| { [key: string]: any }`	`-`
xl	>= 1200px 响应式栅格	`number \| { [key: string]: any }`	`-`
xxl	>= 1600px 响应式栅格	`number \| { [key: string]: any }`	`-`
flex	设置 flex 布局属性	`number \| string \| 'initial' \| 'auto' \| 'none'`	`-`	2.10.0

`<grid>` Props (2.15.0)

响应式配置从 2.18.0 开始支持，具体配置 ResponsiveValue

参数名	描述	类型	默认值
cols	每一行展示的列数	`number \| ResponsiveValue`	`24`
row-gap	行与行之间的间距	`number \| ResponsiveValue`	`0`
col-gap	列与列之间的间距	`number \| ResponsiveValue`	`0`
collapsed	是否折叠	`boolean`	`false`
collapsed-rows	折叠时显示的行数	`number`	`1`

`<grid-item>` Props (2.15.0)