如何为El-Row的Gutter属性设置间距？

一、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间距。