Row / Col 栅格

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

TIP

组件默认使用 Flex 布局，不需要手动设置 type="flex"。请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。列的基本单位为 1，最多 24 个，最少 0 个。

基础布局

使用列创建基础网格布局。通过 Row 和 Col 组件，并通过 Col 组件的 span 属性我们可以自由地组合布局。

分栏间隔

支持列间距。Row 提供 gutter 属性来指定列之间的间距，其默认值为 0。

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

列偏移

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

对齐方式

默认使用 flex 布局来对分栏进行灵活的对齐。通过 justify 属性来定义子元素的排版方式，其取值为 start、center、end、space-between、space-around 或 space-evenly。

响应式布局

参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

列推拉

通过 push 和 pull 属性调整列的排列顺序。

push 16

pull 8

Row API

参数	说明	类型	默认值
`gutter`	栅格间隔	`number`	`0`
`justify`	flex 布局下的水平排列方式	`start \| end \| center \| space-around \| space-between \| space-evenly`	`start`
`align`	flex 布局下的垂直排列方式	`top \| middle \| bottom`	`top`
`wrap`	是否允许换行	`boolean`	`false`
`tag`	自定义元素标签	`string`	`div`

Slots

插槽名	说明
`default`	自定义默认内容

Col API

参数	说明	类型	默认值
`span`	栅格占据的列数	`number`	`24`
`offset`	栅格左侧的间隔格数	`number`	`0`
`push`	栅格向右移动格数	`number`	`0`
`pull`	栅格向左移动格数	`number`	`0`
`xs`	< 640px 响应式栅格数或者栅格属性对象	`number \| { span?, offset? }`	`—`
`sm`	≥ 640px 响应式栅格数或者栅格属性对象	`number \| { span?, offset? }`	`—`
`md`	≥ 768px 响应式栅格数或者栅格属性对象	`number \| { span?, offset? }`	`—`
`lg`	≥ 1024px 响应式栅格数或者栅格属性对象	`number \| { span?, offset? }`	`—`
`xl`	≥ 1280px 响应式栅格数或者栅格属性对象	`number \| { span?, offset? }`	`—`
`tag`	自定义元素标签	`string`	`div`

Slots

插槽名	说明
`default`	自定义默认内容

Row / Col 栅格 ​

基础布局 ​

分栏间隔 ​

混合布局 ​

列偏移 ​

对齐方式 ​

响应式布局 ​

列推拉 ​

Row API ​

Slots ​

Col API ​

Slots ​

Row / Col 栅格

基础布局

分栏间隔

混合布局

列偏移

对齐方式

响应式布局

列推拉

Row API

Slots

Col API

Slots