一、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/zh-hk/n/254369.html
微信掃一掃 
支付寶掃一掃 