Grid 栅格
布局的栅格化系统,我们是基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来
何时使用
- 当需要对页面或者区块进行分栏布局时使用。
Row 栅格行
栅格行
示例
待补充
组件属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| rowGutter | 列间距 | number | 0 |
| columnGutter | 行间距 | number | 0 |
| align | 垂直对齐方式 | top,middle,bottom | top |
| justify | 水平排列方式 | start,end,end,space-around,space-between | start |
| wrap | 自动换行 | boolean | true |
Column 栅格列
栅格列
示例
待补充
组件属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| offset | 栅格左侧的间隔格数,间隔内不可以有栅格 | number | 0 |
| order | 栅格顺序,flex 布局模式下有效 | number | 0 |
| pull | 栅格向左移动格数 | number | 0 |
| push | 栅格向右移动格数 | number | 0 |
| span | 栅格占位格数,为 0 时相当于 display: none | number | 12 |
| xxxl | ≥2000px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | - |
| xs | <576px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | - |
| sm | ≥576px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | - |
| md | ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | - |
| lg | ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | - |
| xl | ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | - |
| xxl | ≥1600px 响应式栅格,可为栅格数或一个包含其他属性的对象 | number | - |