CSSでレイアウトを作っていると、要素同士の余白をどう作るかで悩むことがあります。
そのときによく使われるのが gap というプロパティです。
この記事では、CSSの gapとは何か、そして marginとの違い、実際の使い方まで整理して解説します。
gapとは
gapは、要素と要素の間の余白をまとめて指定できるCSSプロパティです。
主に次のレイアウトで使います。
・flex
・grid
つまり、並んでいる要素の「間隔」だけを指定するためのプロパティです。
例えば次のようなHTMLがあったとします。
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
これを横並びにして、要素の間を20px空けたい場合はこう書きます。
.container {
display: flex;
gap: 20px;
}
これだけで、要素同士の間に20pxの余白ができます。
gapの特徴
gapには大きく3つの特徴があります。
要素同士の「間」だけに余白がつく
gapは、最初と最後の外側には余白がつきません。
例えば3つの要素がある場合
[要素][要素][要素]
gapを20pxにすると
[要素] 20px [要素] 20px [要素]
このように 要素の間だけに余白ができます。
まとめて余白を管理できる
marginで余白を作る場合、すべての要素に指定する必要があります。
例
.box {
margin-right: 20px;
}
しかしこれだと 最後の要素にも余白がつく という問題が起きます。
そのため
.box:last-child {
margin-right: 0;
}
のような調整が必要になります。
gapを使えば
.container {
display: flex;
gap: 20px;
}
これだけで解決します。
レイアウトがシンプルになる
gapは「コンテナ側」に書くため、
子要素に余計なCSSを書かなくて済むというメリットがあります。
結果として
・CSSが読みやすくなる
・メンテナンスしやすくなる
・レイアウトが崩れにくくなる
という利点があります。
gapは縦横で指定できる
gapは、縦と横を別々に指定することもできます。
gap: 縦 横;
例
.container {
display: grid;
gap: 20px 40px;
}
この場合
縦の間隔：20px
横の間隔：40px
になります。
row-gap と column-gap
gapは、次のように個別指定も可能です。
row-gap: 20px;
column-gap: 40px;
意味は次の通りです。
row-gap
→ 縦の余白
column-gap
→ 横の余白
gridレイアウトでは特によく使われます。
まとめ
gapは、要素同士の間隔を簡単に作るためのCSSプロパティです。
主なポイントは次の通りです。
・flexやgridで使う
・要素同士の間だけ余白がつく
・marginより管理が簡単
・縦横を別々に指定できる
最近のCSSでは marginよりgapを使うケースがかなり増えています。
レイアウトをシンプルに保つためにも、flexやgridを使うときは まずgapを使う癖をつけると良いでしょう。
