girdレイアウトでgapを異なる値にしたい時の方法

はじめに

CSSグリッドを使用している際にgapに異なる値を設定したいけど一律で困ると思っていたのですが、girdレイアウトでアイテム間のgapに異なる値にする対応方法を知りましたので紹介します！

前提：gapとは

CSSのgapは、girdレイアウトで使うプロパティで、girdアイテム（箱と箱の間）に余白を入れるためのものです。girdは行と列が組み合わさった配置ですが、この行や列の間に隙間を作りたいときにgapを使います。

簡単に言うと、girdレイアウトで使う「アイテム同士の間隔を開けるためのスペース」です。

gapは行（row-gap）と列（column-gap）でそれぞれ値を設定できますが1つの値しか設定できません。

本題

では、gapに異なる値を設定するにはどうすればよいのか。
それは、gapで余白を定義するのではなくgrid-template-columnsやgrid-template-rowで余白間も含め定義すればよいのです。

<div class="news">
    <p class="date">2024.09.28</p>
    <p class="new">NEW</p>
    <p class="label">おすすめ</p>
</div>

.news {
    display: grid;
    grid-template-columns: 80px 8px 33px 16px 116px;
}

.date {
    grid-column: 1 / 2;
}

.new {
    grid-column: 3 / 4;
}

.label {
    grid-column: 5 / 6;
}

まとめ

最後まで読んでいただきありがとうございました！
grid-template-columnsやgrid-template-rowで余白間も含め定義するのは盲点でした。
ただ、使いすぎるとコードで見たときにぱっと見でどこに余白を設けているのかわからなくなりそうなので使用する場面は選んだ方がよさそうです！

参考

• CSS Gridレイアウトでgrid-gapに異なる値を設定したい場合の対処法