用途:该技能面向 Element Plus 的布局栅格系统,帮助创建响应式网格布局、搭建页面结构、实现分栏设计以及基于断点的响应式设计。
主要能力:采用 24 栅格体系,基本单位为 1,最大 24、最小 0,默认使用 flex 布局,预设 xs、sm、md、lg、xl 五个断点。通过 Row 与 Col 组件及 span 属性创建基础布局;Row 的 gutter 属性设置列间距;Col 的 offset 属性设置列偏移;Row 的 justify 属性实现水平对齐,可选 start、end、center、space-around、space-between、space-evenly;align 属性实现垂直对齐,可选 top、middle、bottom。断点对应屏幕宽度:xs <768px、sm ≥768px、md ≥992px、lg ≥1200px、xl ≥1920px,可用数字或对象语法(如 :xs="{ span: 24, offset: 0 }")设置响应式列。
使用方式:在模板中使用 el-row 与 el-col,例如 <el-col :span="12">;设置间距用 <el-row :gutter="20">;响应式用 :xs、:sm、:md、:lg、:xl。隐藏元素需导入 CSS:import 'element-plus/theme-chalk/display.css',可用类包括 hidden-xs-only、hidden-sm-only、hidden-sm-and-down、hidden-sm-and-up、hidden-md-only、hidden-md-and-down、hidden-md-and-up、hidden-lg-only、hidden-lg-and-down、hidden-lg-and-up、hidden-xl-only。Row 与 Col 均支持 tag 属性自定义元素标签。
适用场景:响应式页面布局、分栏结构、移动优先设计,以及配合 Container 完成整页布局。
限制与建议:资料未提供安装命令、版本要求、收费信息或具体效果数据,暂未提供。建议使用 gutter 增加列间距,优先使用断点属性而非内联样式,父容器避免内联样式。