CSSレイアウトの隙間調整：Flexbox、Grid、そして「gap」プロパティ

CSSのgapプロパティは、FlexboxやCSS Gridレイアウトにおいて、要素間の隙間（ガップ）を簡単に設定できる便利な機能です。従来のmarginプロパティと異なり、より直感的な操作でレイアウトを調整できるため、近年注目を集めています。

本ガイドでは、gapプロパティの仕組み、書き方、利点、注意点などを詳細に解説します。さらに、実用的な例も交えながら、gapプロパティを効果的に活用する方法を学んでいきましょう。

gapプロパティとは

gapプロパティは、FlexboxコンテナまたはCSS Gridコンテナ内の要素間の隙間（ガップ）を均等に設定するプロパティです。行方向と列方向の隙間をそれぞれ独立して設定することもできます。

書き方

以下の2つの書き方が可能です。

単一値による設定
行方向と列方向の隙間を同じ値に設定します。

.container {
  display: flex; /* または display: grid; */
  gap: 10px; /* すべての要素間の隙間を10pxに設定 */
}

個別値による設定
行方向と列方向の隙間をそれぞれ異なる値に設定します。

.container {
  display: flex; /* または display: grid; */
  gap: 5px 10px; /* 行方向の隙間を5px、列方向の隙間を10pxに設定 */
}

利点

gapプロパティを使用する利点は次のとおりです。

レスポンシブデザインへの適応
メディアクエリと組み合わせて、画面サイズに応じて隙間を調整できる。
コードの簡潔化
従来のmarginプロパティと比べて、コードが簡潔になり、可読性が向上。
柔軟なレイアウト調整
行方向と列方向の隙間を個別に設定できるため、より柔軟なレイアウトが可能。
直感的な操作
数値で隙間を直接指定できるため、視覚的にイメージしやすい。

注意点

すべてのブラウザで互換性が確保されているわけではありません。古いブラウザでは、ポリフィルが必要となる場合があります。
要素間の隙間は、要素のサイズに加算されます。
gapプロパティは、FlexboxコンテナまたはCSS Gridコンテナでのみ有効です。

実用的な例

以下に、gapプロパティを用いた実用的な例をいくつか紹介します。

カード型レイアウト
商品カードやブログ記事など、カード型レイアウトを簡単に作成できます。

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

グリッドレイアウトの隙間調整
CSS Gridレイアウトで作成したグリッドの隙間を調整できます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

フレックスボックスレイアウトの隙間調整
フレックスボックスレイアウトで並べた要素間の隙間を調整できます。

.flex-container {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.item {
  flex: 1;
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

ベンダープレフィックスは不要です。
gapプロパティは、負の値を指定することもできます。
gapプロパティは、CSS Gridのgrid-gapプロパティと互換性があります。

[MDN

カード型レイアウト

このコードは、gapプロパティを使用して、カード型レイアウトを作成します。

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

結果

このコードを実行すると、以下のようなカード型レイアウトが作成されます。

グリッドレイアウトの隙間調整

このコードは、gapプロパティを使用して、CSS Gridレイアウトで作成したグリッドの隙間を調整します。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

結果

このコードを実行すると、以下のようなグリッドレイアウトが作成されます。

フレックスボックスレイアウトの隙間調整

このコードは、gapプロパティを使用して、フレックスボックスレイアウトで並べた要素間の隙間を調整します。

.flex-container {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.item {
  flex: 1;
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

結果

このコードを実行すると、以下のようなフレックスボックスレイアウトが作成されます。

行方向と列方向の隙間を個別に設定する

.container {
  display: flex;
  gap: 10px 20px;
}

負の値を指定して要素を密接に配置する

.container {
  display: grid;
  gap: -5px;
}

CSSのgapプロパティは、FlexboxやCSS Gridレイアウトにおいて要素間の隙間（ガップ）を簡単に設定できる便利な機能ですが、すべてのブラウザで対応しているわけではありません。古いブラウザでは、gapプロパティが機能しない場合があります。

このような場合、gapプロパティの代替方法として以下の方法が考えられます。

marginプロパティを使用する

従来のmarginプロパティを使用して、各要素に個別に余白を設定することで、gapプロパティと同等のレイアウトを作成することができます。

.container {
  display: flex; /* または display: grid; */
}

.item {
  margin: 10px; /* 各要素に10pxの余白を設定 */
}

ただし、この方法では、行方向と列方向の隙間を個別に設定することができず、gapプロパティよりも柔軟性に欠けます。また、コードが冗長になり、可読性が低下する可能性があります。

ベンダープレフィックスを使用する

一部の古いブラウザでは、gapプロパティにベンダープレフィックスを追加することで、機能させることができます。

.container {
  display: flex; /* または display: grid; */
  gap: 10px;
  gap-legacy: 10px; /* 古いブラウザ向け */
}

しかし、ベンダープレフィックスはコードを煩雑にし、メンテナンス性を低下させる可能性があります。

ライブラリを使用する

これらのライブラリを使用することで、古いブラウザでもgapプロパティと同等の機能を利用することができます。しかし、ライブラリの導入や設定が必要となるため、手間がかかります。

レスポンシブデザインを考慮する

gapプロパティは、新しいブラウザでのみ利用できることを考慮し、古いブラウザ向けには異なるレイアウトを提供するレスポンシブデザインを採用する方法もあります。

メディアクエリを使用して、画面サイズやブラウザの種類に応じて、レイアウトを切り替えることができます。

/* 新しいブラウザ向け */
@media (not all) {
  .container {
    display: flex; /* または display: grid; */
    gap: 10px;
  }

  .item {
    margin: 5px; /* 古いブラウザでは `margin` を使用 */
  }
}

上記以外にも、paddingプロパティや負のmarginプロパティなどを組み合わせて、gapプロパティの代替として利用することができます。