CSS gap: もうmarginで悩まない！モダンなレイアウトの必須プロパティ

CSSで要素間にスペースを空ける際、私が思いつくのはmarginでした。
しかし、意図しない余白や、レイアウトが崩れるときがある…

そんな悩みを解決してくれるのが、gapです。
今回は、gapがmarginと比較して良い点を考えてみます！

gapがmarginより優れている点

1. 意図しない余白を生まない 🙅
   marginは要素の外側に余白を作るため、レイアウトの両端にも余分なスペースができてしまうことがあります。
   特に、margin-leftやmargin-rightを使って要素間にスペースを作る場合、両端の要素にも余白ができてしまい、それを打ち消すための追加のCSSが必要になります。
   一方、gapは子要素と子要素の間にのみスペースを空けます。
   親要素の端や子要素の外側には余白を作らないため、余分なCSSを書く必要がありません。

2. 要素の追加・削除に強い 💪
   marginを使ってスペースを調整する場合、:last-childや:not(:first-child)といったセレクタを使って、特定の要素にmarginを適用しないようにすることがあります。
   しかし、要素の増減によってこれらのセレクタの条件が変わると、レイアウトが崩れてしまうリスクがあります。
   gapは、このような心配がありません。
   要素の有無にかかわらず、常に要素間にのみスペースを生成するため、要素の追加・削除に非常に強いです。

gapの使い方

gapは、display: flex;を指定したコンテナに設定します。
ボタンを縦に並べる場合は、flex-direction: column;を追加することで、縦方向の間隔をgapで調整できます。

gapの隠れたメリット：要素の有無に左右されない柔軟性

私の押しポイントです。

上記で説明したgapの使い方の例で言うと、「ボタンがない場合でも、余計なスペースが生まれない」という点です。

marginの場合、子要素の有無にかかわらず、親要素に指定したmarginが適用されてしまい、意図しない余白が残ることがありました。

しかし、gapは子要素と子要素の間にのみスペースを空けるため、要素が存在しない場合は、一切のスペースが生成されません。

まとめ

gapは、モダンなCSSレイアウトにおいて、marginよりも直感的で、かつ柔軟に要素間のスペースを調整できるプロパティです。
FlexboxやCSS Gridと組み合わせて使うことで、よりシンプルでメンテナンス性の高いコードを書くことができます。

今後、要素間にスペースを空けたい時は、gapの利用を検討してみてください。