CSSグリッドを使用している際にgrid-gapに異なる値を設定したいと思ったことはないでしょうか。

grid-gapとは

gridコンテナ内のアイテム間の幅を指定するgridのプロパティです。
このプロパティ、grid-column-gapとgrid-row-gapという縦と横の値をそれぞれ指定することが出来ます。

ただ、それぞれ指定できる値は1つのみ。

異なる値を指定できれば柔軟なレイアウトを実現することが可能ですが残念ながらgapでそれをすることは出来ません。

解決策1

アイテムにmarginやpaddingで余白を追加する方法です。

gapの値はそのままで、margin/paddingの余白分を追加して幅を広げます。

普通はこの方法が一番手っ取り早く出来ますが、gapの値とmargin/paddingの値を足した値がアイテム間の幅となり、見た目上は問題ないものの、実際にアイテム間の幅がいくつになっているかが分かりにくくなってしまいます。

解決策2

gapを使用せずに余白をアイテムとして追加する方法です。

列は1つのみで、行が3行ある場合の実装例です。

<div class="grid">
<div class="itemA"></div>
<div class="itemB"></div>
<div class="itemC"></div>
</div>

.grid {
display: grid;
grid-template-rows: auto 20px auto 30px auto;
grid-template-columns: 100%;
}
.itemA {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.itemB {
grid-row: 3 / 4;
grid-column: 1 / 2;
}
.itemC {
grid-row: 5 / 6;
grid-column: 1 / 2;
}

上記の指定では、縦にならんだアイテム間をそれぞれ、
itemA - itemB 間を 20px
itemB - itemC 間を 30px
の余白を開けるようにしています。

ポイントとなるのが、.gridに指定している grid-template-rows: auto 20px auto 30px auto; の部分です。

アイテムが、itemA・itemB・itemC の3つなのに対し、5つの値を指定しています。
gapとしたい箇所に実際の行幅を指定しているのです。

itemA・itemB・itemC に対しては、コンテナ内のどのセルに配置をするかの指定をしているので、配置が決定しています。

<div class="grid">
<div class="itemA"></div> /* grid-row: 1 / 2 */
<div class="itemB"></div> /* grid-row: 3 / 4 */
<div class="itemC"></div> /* grid-row: 5 / 6 */
</div>

この指定をすると、grid-row: 2 / 3 および grid-row: 4 / 5 のセルにアイテムが設定されていませんが、grid-template-rows にて値が設定されているために、その分の余白（アイテム）が確保されているのです。

最後に

便利な方法ではありますが、使い過ぎると余白の指定をどこでしているか分からなくなってしまうので、複雑になってしまいそうな時はコンテナを分ける等で対応しましょう。