elementui中gutter和offset的区别

最新推荐文章于 2025-02-20 10:52:28 发布

3木子夕H

最新推荐文章于 2025-02-20 10:52:28 发布

阅读量5.3w

点赞数 38

文章标签： element ui vue.js

本文链接：https://blog.csdn.net/weixin_43126568/article/details/107914613

版权

本文详细解析了Element UI中栅格系统的使用方法，包括gutter（栅格间间隔）和offset（栅格左侧间隔）的配置。通过el-row和el-col组件，可以灵活调整布局，实现响应式网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

gutter是指栅格间间隔，offset是指栅格左侧的间隔格数

分栏间隔

el-row配置行，el-col配置列，像是一个个单行的表格

el-row上的属性gutter，默认值为0，可以设置大于0的任意数字

在PC端，设置的这个gutter值为该单元格左右的padding之和

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

上图代表的是"padding-left: 10px; padding-right: 10px;"
在这里插入图片描述
分栏偏移
el-col的offset属性，设置某个el-col元素左侧空多少份的位置，默认为0

如果其offset和span之和大于24，则该行剩余元素移到下一行，同时这个元素只显示一部分

<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>