一、Gutter是什么？
Gutter就是CSS Grid中单元格之间的间距，我们可以通过设置grid-gap属性来控制它。
而在Element-UI中的Grid布局中，启用了Gutter属性，可以方便的控制横向间距。
二、如何设置Gutter间距？
在使用Element-UI的Grid布局时，我们可以在El-Row标签上设置Gutter属性来控制横向间距。
以下是一个设置Gutter为20px的示例：
<el-row :gutter="20"> <el-col :span="12"></el-col> <el-col :span="12"></el-col> </el-row>
也可以设置一个数组来分别控制横向和纵向间距：
<el-row :gutter="[20, 10]"> <el-col :span="12"></el-col> <el-col :span="12"></el-col> </el-row>
同时，也可以为不同大小的屏幕设置不同的Gutter间距：
<el-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
<el-col :span="12"></el-col>
<el-col :span="12"></el-col>
</el-row>
三、如何自定义Gutter间距？
除此之外，我们也可以通过修改Element-UI的全局样式来自定义Gutter间距。
首先我们需要在自己的项目中创建一个.scss文件，在里面定义自己的Gutter间距。
以下示例代码定义了Gutter间距为30px：
$--gutter: 30px;
.el-row {
margin-right: -$--gutter;
margin-left: -$--gutter;
}
.el-row .el-col {
padding-right: $--gutter;
padding-left: $--gutter;
}
接着，可以在自己的main.js文件中引入.scss文件：
import './styles/variables.scss';
这样，我们就可以在项目中使用我们自定义的Gutter间距了。
四、总结
通过上述三个方面，我们可以实现如何为El-Row的Gutter属性设置间距。
我们可以通过在El-Row标签上设置Gutter属性来控制横向间距、也可以自定义全局样式来实现自己的Gutter间距。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/254369.html
微信扫一扫 
支付宝扫一扫 