设置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”属性，用于注册模板引用以访问组件实例方法。 如果为“数据源表单”组件，会自动填充默认值。 |
是 |
