elementui grid

ElementUI Grid 布局系统

ElementUI 提供了一套基于 24 分栏的响应式栅格系统，用于快速构建页面布局。该系统由 el-row 和 el-col 组件构成，支持灵活的布局配置。

基本用法

使用 el-row 创建行，el-col 创建列。通过 span 属性指定列宽（总宽度为 24）：

<el-row>
  <el-col :span="8">占 8 栏</el-col>
  <el-col :span="16">占 16 栏</el-col>
</el-row>

响应式布局

支持多种屏幕尺寸的断点配置：

• xs：<768px
• sm：≥768px
• md：≥992px
• lg：≥1200px
• xl：≥1920px

<el-row>
  <el-col :xs="24" :sm="12" :md="8" :lg="6">响应式列</el-col>
</el-row>

间隔设置

通过 gutter 属性设置列间距（单位 px）：

<el-row :gutter="20">
  <el-col :span="6"><div style="background:#f5f5f5;height:100px"></div></el-col>
  <el-col :span="6"><div style="background:#f5f5f5;height:100px"></div></el-col>
</el-row>

对齐方式

利用 type="flex" 启用弹性布局，配合 justify 和 align 控制对齐：

<el-row type="flex" justify="center" align="middle">
  <el-col :span="6">居中对齐</el-col>
</el-row>

偏移与排序

通过 offset 设置偏移栏数，push/pull 控制排序：

<el-row>
  <el-col :span="6" :offset="6">向右偏移 6 栏</el-col>
  <el-col :span="6" :push="6">推到右侧 6 栏位置</el-col>
</el-row>

注意事项

1. 直接子元素必须是 el-col
2. 建议在 el-col 内再嵌套实际内容容器
3. 响应式设计需合理规划不同断点的布局方案