设置UI引擎前端页面栅格布局组件属性
栅格布局组件为前端开发提供标准化、响应式的布局解决方案。采用12/24列网格系统，能够灵活适应不同屏幕尺寸，尤其适用于工业领域的监控面板、工艺流程图及数据看板等可视化界面。
通过Layout（容器）、Row（行）和Col（列）三类组件的嵌套组合，可高效构建结构清晰、排列规整的页面布局，显著提升开发效率与界面一致性。
前提条件
已在当前页面添加“栅格布局”组件，具体操作请参见为UI引擎前端页面添加物料组件。
配置入口
- 在页面设计器的中心画布区，单击选中“栅格布局”组件。
- 在右侧设置面板中，单击
，即可展开“属性”设置面板。
基础属性（Layout）
容器属性主要用于定义栅格布局的整体列数及渲染标签，是实现灵活布局的核心设置。
| 属性名称 | 说明 | 是否支持变量绑定 |
|---|---|---|
| 栅格列数选择器 | 定义每行被划分的列数，支持可选值为12或24，默认值为12列。
| 是 |
| layout渲染的标签 | 指定Layout组件根节点在HTML转换时使用的标签，默认值为“div”。可根据SEO优化或特定框架的需求，调整为更具语义化的标签（如section、article等）。 | 是 |
基础属性（Row）
行属性主要用于定义单行的布局方式、子项排列及间隔，支持灵活调整以满足不同场景需求。
| 属性名称 | 说明 | 是否支持变量绑定 |
|---|---|---|
| 列数选择器 | UI引擎内置的列数快速选择器，适用于简单布局场景。 | 是 |
| 自定义: (可拖拽分隔符调整) | 通过拖拽分隔符直观调整各列占比。 默认比例：3:3:3:3（12列布局下）。 | 否 |
| flex容器 | 设置行组件是否为Flex容器，默认值为“false”。 开启后可通过子项对齐方式和子项排序实现复杂布局。 | 是 |
| 子项对齐方式 | 仅当行组件开启Flex容器时有效，等效于CSS的“align-items”属性，用于控制子项的垂直对齐方式。 可选值：顶部对齐、垂直居中、底部对齐。 | 是 |
| 子项间隔 | 定义子项之间的水平间距（单位：px），默认值为0。 | 是 |
| 子项排序 | 定义子项的排序方式，需配合Col组件的排序编号使用。 可选值：升序、降序。 不设置时，保留模板中的默认顺序。 | 是 |
基础属性（Col）
列属性用于定义单个列的宽度、偏移量及响应式行为，是栅格布局的核心单元。
| 属性名称 | 说明 | 是否支持变量绑定 |
|---|---|---|
| 栅格列格数 | 定义该列占据的栅格数。 默认场景：12列布局下4个子项各占3格。 | 是 |
| 排序编号 | 指定该列在Row中的排列顺序，配合Row的子项排序属性使用。 | 是 |
| 间隔格数 | 定义该列的向右偏移量（通过“margin-left”实现）。 | 是 |
| 超小屏格数 | 屏幕宽度<768px时的栅格占用数。 适用设备：工业手持终端、小型控制面板。 | 是 |
| 小屏格数 | 768px≤宽度<992px时的栅格占用数。 适用设备：平板电脑、中型控制台。 | 是 |
| 中屏格数 | 992px≤宽度<1200px时的栅格占用数。 适用设备：标准工控机显示器。 | 是 |
| 大屏格数 | 1200px≤宽度<1920px时的栅格占用数。 适用设备：高清监控大屏、指挥中心屏幕。 | 是 |
| 超大屏格数 | 宽度≥1920px时的栅格占用数。 适用设备：超宽拼接屏、数据可视化大屏。 | 是 |
其他
如下属性适用于UI引擎所有组件，用于精细化控制。
| 属性名称 | 说明 | 是否支持变量绑定 |
|---|---|---|
| 元素id值 | 对应HTML标签的“id”属性，同一页面内必须唯一。 | 是 |
| 样式类 | 对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。 | 是 |
| ref引用类 | 对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。 如果为“数据源表单”组件，会自动填充默认值。 | 是 |
