布局容器

该组件是低代码平台中用于创建结构化栅格布局的基础容器，基于 Element Plus 的 <el-row> / <el-col> 实现，支持自定义行数、列数、间距及对齐方式。

基础属性

属性	类型	默认值	说明
行数 rowCnt	number（整数 ≥1）	1	容器包含的行数量
列数 colCnt	number（整数 ≥1）	3	每行包含的列数量
间隔 gutter	number（≥0）	—	列之间的水平与垂直间距（单位：px）
水平排列 justify	枚举	—	控制每行内容的水平对齐方式
垂直排列 align	枚举	—	控制列内子项的垂直对齐方式

核心能力

1. 动态栅格生成

• 根据 rowCnt × colCnt 自动生成对应数量的插槽（如 2 行 3 列 → 6 个插槽）；
• 插槽以二维网格形式组织，每个单元格可独立放置任意子组件；
• 支持拖拽、选中、删除等完整设计器交互。

2. 智能列宽分配

• 当所有列 span 相同或总和为 24 的倍数时，自动将每列 span 设为 Math.floor(24 / colCnt)；

该组件是构建可视化页面结构的“画布网格”，兼顾灵活性与规范性，是低代码布局体系的核心支柱。