Layout 栅格
组织响应式内容。构成界面语言与布局结构的基础单元。
实时示例
8
8
8
Vue 示例
<el-layout />使用规则
优先使用语义明确的属性和统一间距，不以装饰替代信息层级。
不要通过局部硬编码改变品牌色、圆角或状态语义；不要隐藏必要的操作反馈。
状态与变体
- 默认、悬停、聚焦、按下和禁用状态必须保持可辨识。
- 加载、空、错误状态按业务影响选用，不用品牌强调色表达错误。
- 紧凑尺寸只用于高密度后台场景，触控目标仍应满足可操作要求。
基础用法
<el-layout>栅格</el-layout>设计变量
color.text.primarycolor.border.defaultspacing.mdradius.md无障碍
保持可见焦点；图标操作必须提供可访问名称；正文对比度不低于 4.5:1。