知道如何操縱網格後，如果希望網格區域之間是可以有間隙( gutter )的，除了對所有網格做 margin 之外，也可以使用 grid 的 gap 相關屬性
.container {
row-gap: <length> | <percentage>;
column-gap: <length> | <percentage>;
}
預設: 0
如果你看到的是 grid-row-gap 和 grid-column-gap，這兩個屬性的名稱其實是過時的，看文件中已經沒有這兩個屬性的名稱，取而代之的是 row-gap 來設定"行"之間的間格、 column-gap 設定"列"之間的間隔。
1.只能使用長度值和百分比，不能使用負值、fr、minmax()等。
2.用這個方法設定的各行或各列的間距一定會都相同，不會有單一行或列的尺寸不同，那就得另外用 margin 做間距了。
<style>
.container{
display: inline-grid;
grid-auto-flow: column;
grid-template-columns: 80px 80px 80px;
grid-template-rows: 80px 80px;
background-color: #a5def5;
column-gap: 10px; /*改變屬性值看看變化*/
row-gap: 20px; /**改變屬性值看看變化/
}
.item {
width: 40px;
height: 40px;
margin: 5px;
color: white;
background-color: #00A0E9;
}
</style>
<body>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
</div>
</body>
可以看到沒有放任何網格項目的間隙，如果是以設定網格軌道尺寸的角度來看，其實間隙也被視同是網格軌道的一部份。
.container {
gap: <grid-row-gap> <grid-column-gap>
}
預設: 0 0
同理，如果你看到的是 grid-gap，這個屬性的名稱也是過時的，看文件中已經更換為 gap 名稱。這可以同時使用 row-gap 和 column-gap 的屬性。
.container{
column-gap: 10px;
row-gap: 20px;
/*等同於*/
gap: 20px 10px;
}
另外在設定 justify-content 和 align-content 時可能會改變 grid gap 間隔的值，不過那會在之後再做討論。
資料來源：
iThome鐵人賽
看影片追技術