当前位置：首页 > 前端教程

elementui网格

2026-03-06 07:08:48前端教程

ElementUI 网格布局

ElementUI 提供了基于 el-row 和 el-col 的网格系统，用于快速构建响应式布局。该系统基于 24 栏分栏设计，支持灵活的布局调整。

基本网格布局

使用 el-row 作为容器，el-col 作为子项，通过 span 属性设置宽度占比（24 等分）：

<el-row>
  <el-col :span="12">占 50% 宽度</el-col>
  <el-col :span="12">占 50% 宽度</el-col>
</el-row>

响应式布局

通过 xs、sm、md、lg、xl 属性适配不同屏幕尺寸：

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

xs：超小屏幕（<768px）
sm：小屏幕（≥768px）
md：中等屏幕（≥992px）
lg：大屏幕（≥1200px）
xl：超大屏幕（≥1920px）

分栏间隔

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

<el-row :gutter="20">
  <el-col :span="8"><div style="background: #f0f9eb;">列1</div></el-col>
  <el-col :span="8"><div style="background: #f0f9eb;">列2</div></el-col>
</el-row>

对齐方式

通过 el-row 的 type="flex" 启用弹性布局，结合 justify 和 align 控制对齐：

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

justify：水平对齐（start/end/center/space-around/space-between）
align：垂直对齐（top/middle/bottom）

嵌套网格

el-col 内可继续嵌套 el-row 实现复杂布局：

elementui网格

<el-row>
  <el-col :span="12">
    <el-row>
      <el-col :span="6">嵌套列1</el-col>
      <el-col :span="6">嵌套列2</el-col>
    </el-row>
  </el-col>
</el-row>