栅格布局

概念说明

   通过设置行、列的格子数将页面分成若干个格子进行布局的一种方式。

• 栅格行：可设置每行的栅格数以及行内组件对齐方式。
• 栅格列：可设置每列的占据数，以及列的偏移数。

属性

组件通用属性请参见组件通用说明。

栅格布局

行间隔：支持修改栅格行之间的间隔，支持紧凑（-1）、无（0）、小（8）、正常（16）、大（32）共6种间隔模式。

栅格行

• 横轴对齐：支持左对齐、居中对齐、右对齐、平均分布（两端不留空）、平均分布。

• 纵轴对齐：支持顶对齐、垂直居中、底对齐、行内文字基线对齐、占满容器高度。

• 栅格数：支持设置栅格行大小，默认为24。

• 栅格槽：栅格列之间的间隔，支持无（0）、迷你（4）、小（8）、正常（16）、巨大（32）共6种间隔模式。

栅格列

• 布局模式：

  • 内联布局：将当前元素修改为内联布局模式，各个内联布局模式的元素将默认排布在同一行中，若空间不足以排布下一个内联布局元素，则该元素将会换行。
  • 弹性布局：在弹性布局模式中，子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免溢出父元素。

• 主轴方向：

  • 横向：内部子元素进行横向排布，建议内部子元素使用行内布局。
  • 纵向：内部子元素进行纵向排布，建议内部子元素使用块级布局。

• 横轴对齐：

  • 主轴方向为横向时：支持左对齐、居中对齐、右对齐、平均分布（两端不留空）、平均分布。

  • 主轴方向为纵向时：支持左对齐、居中对齐、右对齐、占满容器宽度。

• 纵轴对齐：

  • 主轴方向为横向时：支持顶对齐、垂直居中、底对齐、行内文字基线对齐、占满容器高度。

  • 主轴方向为纵向时：支持顶对齐、垂直居中、底对齐、平均分布（两端不留空）、平均分布。

• 是否换行：支持控制弹性布局模式下，子元素总宽度超过父级时是否换行展示，默认开启。

• 内容间隙：布局内各个组件之间的间隔，通常有收缩、无、小、正常、大，默认为正常。

  主轴方向、横轴对齐、纵轴对齐、是否换行、内容间隙仅在弹性布局模式下支持编辑。

• 占据栅格数：支持设置当前栅格列占据的栅格数，不能超过当前栅格行栅格数。

• 偏移栅格数：支持设置栅格列偏移数，控制当前栅格列与其左侧栅格列的距离，处于当前栅格列右侧的栅格列也会同步偏移。

• 左移动栅格数：向左移动的栅格数，支持栅格互相重合。

• 右移动栅格数：向右移动的栅格数，支持栅格互相重合。

事件

• 栅格布局组件、栅格行组件不支持事件。

• 栅格列组件支持事件列表如下：

事件名	触发条件
响应窗口变化时	响应式布局引发栅格变化时触发

样式

样式说明请参见组件通用说明。