# 设置UI引擎前端页面栅格布局组件属性
栅格布局组件为前端开发提供标准化、响应式的布局解决方案。采用12/24列网格系统，能够灵活适应不同屏幕尺寸，尤其适用于工业领域的监控面板、工艺流程图及数据看板等可视化界面。
通过Layout（容器）、Row（行）和Col（列）三类组件的嵌套组合，可高效构建结构清晰、排列规整的页面布局，显著提升开发效率与界面一致性。
#### 前提条件
已在当前页面添加"栅格布局"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"栅格布局"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002503684142.png)，即可展开"属性"设置面板。
 
#### 基础属性（Layout）
容器属性主要用于定义栅格布局的整体列数及渲染标签，是实现灵活布局的核心设置。
| 属性名称        | 说明                                                                                                                                                                                                                                                                                                                                                                                                    | 是否支持变量绑定 |
|:---|:---|:---|
| 栅格列数选择器     | 定义每行被划分的列数，支持可选值为12或24，默认值为12列。 - 12列：适用于常规设备监控面板等场景，提供均衡的布局效果。  - 24列：适用于高精度数据报表场景（如多参数实时监控），能够实现更精细的布局控制。   | 是        |
| 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"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是        |