1. ホーム
  2. CSS

【CSS】gap プロパティの使い方｜Flexbox・Grid の余白をまとめて指定する

Share

Flexbox や Grid でアイテムを並べたとき、要素同士の間隔をどう空けるか迷ったことはないでしょうか。以前は margin で調整するのが定番でしたが、端の余白が二重になったり計算が面倒だったりと、扱いにくい場面が多くありました。この記事では、要素間の間隔をすっきり指定できる gap プロパティの使い方を、初心者の方にも分かるように解説します。

gap プロパティとは

gap は、Flexbox・Grid・段組み（multicolumn）レイアウトでアイテムとアイテムのあいだの間隔を指定するプロパティです。コンテナ（親要素）側に一度書くだけで、子要素すべての間に均等な隙間が空きます。

ポイントは、要素の外側ではなく「あいだ」だけに間隔ができることです。margin のように一番端の要素にまで余白が付かないため、コンテナの内側にぴったり収まります。

基本の使い方

まずは Grid レイアウトで 3 列に並べた 6 個のボックスに、gap: 20px; で間隔を付けた例を見てみましょう。下のエディタは値を書き換えると右側のプレビューに反映されます。gap の数値を変えて、間隔がどう変わるか試してみてください。

<div class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 行と列の間隔をまとめて 20px に指定 */
  gap: 20px;
}

.box {
  background: #007bff;
  color: #fff;
  padding: 24px 0;
  text-align: center;
  border-radius: 6px;
  font-weight: bold;
}
Preview

このように、コンテナに gap を 1 行書くだけで、列の間にも行の間にも同じ間隔が入ります。各ボックスに margin を付けて回る必要はありません。

行と列で別々の間隔を指定する

gap には値を 1 つだけ書く方法と、2 つ書く方法があります。値を 2 つ書くと、1 つ目が行の間隔（縦）、2 つ目が列の間隔（横）になります。

style.css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  /* 値が1つ … 行も列も 20px */
  gap: 20px;

  /* 値が2つ … 行は 32px、列は 16px */
  gap: 32px 16px;
}

行と列で個別に指定したいときのために、専用のプロパティも用意されています。次の表のように使い分けられます。

プロパティ意味
row-gap行と行のあいだ（縦方向）の間隔
column-gap列と列のあいだ（横方向）の間隔
gaprow-gap と column-gap をまとめて書くショートハンド

つまり gap: 32px 16px; は、row-gap: 32px; column-gap: 16px; と書いたのと同じ意味になります。

Flexbox でも gap が使える

gap は Grid 専用というイメージを持たれがちですが、Flexbox でも同じように使えます。横並びのボタンやカードを等間隔に並べたいときに便利です。

style.css
.buttons {
  display: flex;
  /* ボタンのあいだだけに 12px の隙間を空ける */
  gap: 12px;
}

Flexbox で折り返し（flex-wrap: wrap;）を有効にしているときは、折り返した行と行のあいだにも gap の間隔が効きます。margin で組んでいたころの「折り返すと余白がガタつく」という悩みが起きにくいのが利点です。

margin との違いと使いどころ

margin でアイテムの間隔を作ると、一番端の要素にも余白が付いてしまい、それを :last-child で打ち消す、といった手間が発生しがちでした。gap は「あいだ」だけに間隔を作るので、こうした打ち消し処理が不要になります。

一方で、gap はあくまで Flexbox・Grid・段組みのコンテナの中でアイテム同士の間隔を作るためのものです。単独の要素を上下左右にずらしたい、見出しと本文のあいだを空けたい、といった用途では従来どおり margin を使います。レイアウトの「並び」の間隔は gap、個別要素の位置調整は margin、と役割で考えると整理しやすくなります。

gap が効かないときに見直すこと

コンテナが Flex / Grid になっていない

gap はコンテナに display: flex; または display: grid;（あるいは inline-flex / inline-grid）が指定されていて初めて効果が出ます。間隔が空かないときは、まず親要素にこのいずれかが付いているかを確認しましょう。通常のブロック要素を gap だけで並べることはできません。

子要素ではなく親に書いているか

gap を間隔を空けたいアイテム（子要素）の方に書いても効きません。指定する場所は、あくまで display: flex; や display: grid; を付けたコンテナ側です。書く場所を間違えていないか見直してみてください。

古いブラウザを対象にしている

Flexbox での gap は比較的新しく対応した機能です。現在の主要なブラウザ（Chrome・Firefox・Safari・Edge）はいずれも対応済みなので、通常の制作では問題になりません。ただしかなり古いバージョンの Safari などを切り捨てられない案件では、念のため対応状況を確認しておくと安心です。

まとめ

gap プロパティは、Flexbox・Grid のアイテム同士の間隔を、コンテナ側に 1 行書くだけで均等に空けられる便利なプロパティです。要点を振り返っておきましょう。

  • アイテムの「あいだ」だけに間隔ができ、端には余白が付かない
  • 値を 2 つ書くと「行の間隔　列の間隔」を別々に指定できる
  • Grid だけでなく Flexbox でも使える
  • 効かないときは、まず親要素が Flex / Grid になっているか確認する

これまで margin で間隔を調整していた箇所も、gap に置き換えると CSS がぐっとシンプルになります。レイアウトを組むときの定番として、ぜひ使ってみてください。

参考ページ