gapプロパティでflexboxやgridに余白を入れる方法

要素間の余白を簡単に設定できる gap プロパティの使い方を紹介します。

結論から書くと、FlexboxやGridの中の余白は margin ではなく gap で作ってください。両端に余分な余白が出ず、最後の要素だけ打ち消す、といった調整も不要になります。

▼marginとgapの違い

基本的なgapプロパティの使い方

gapプロパティは、FlexboxやGridコンテナ内の要素間の余白を指定するためのCSSプロパティです。これにより、要素間のスペースをmarginを使わずに簡単に設定できるようになります。

gapプロパティの構文は以下のようになります。

.container {
  display: flex; /* または display: grid; */
  gap: 20px; /* 任意の値を指定 */
}

例えば、以下のようなHTMLとCSSがあったとします。この場合、box要素間に20pxの余白が自動的に追加されます。

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

.container {
  display: grid;
  gap: 20px;
}

.box {
  background-color: #f0f0f0;
  padding: 10px;
}

結論：gap は「行の間」と「列の間」をまとめて指定します。分けたい場合は row-gap と column-gap を使います。

.container {
  display: grid;
  /* 行間 30px、列間 10px */
  row-gap: 30px;
  column-gap: 10px;
}

まとめて書くこともできます。値を2つ書いたときは「行列」の順です。

.container {
  /* 上が行間、下が列間 */
  gap: 30px 10px;
}

順序を逆に覚えていると、意図と違う余白になります。margin や padding の「上右下左」とは並びが違うので注意してください。

結論：gap が効くのは、親要素が flex か grid（または multi-column）のときだけです。

display の指定を忘れていると、gap は無視されます。効かないときは、まず親に display: flex か display: grid が付いているかを確認してください。

.container {
  /* これが無いと gap は効かない */
  display: flex;
  gap: 20px;
}

display: block や display: inline-block の要素の間隔は、gap では作れません。その場合は margin を使うか、親を flex にしてください。

Flexboxとgapプロパティを組み合わせることで、簡単にレスポンシブデザインを実現できます。例えば、以下のようなCSSを考えてみましょう。この場合、画面の幅に応じてbox要素のカラム数が変化します。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.box {
  flex: 1 0 200px;
}

gapプロパティを使うと、画像などの要素を簡単にグリッド状に配置できます。

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

この記事では、gapプロパティを使った余白の実装方法を紹介しました。FlexboxやGridと組み合わせることで、レイアウトの調整やレスポンシブデザイン、モザイクレイアウトなど、様々な使い方ができるのでぜひ試してみてください。

gap を使うと、flexboxのspace-betweenで最後の要素が両端に散る問題も起きなくなります。左詰めにしたうえで gap で隙間を作るほうが、space-between を使って後から調整するより確実です。

レイアウト全体をフレームワークに任せたい場合は、CSSでオススメのフレームワークと実装例もどうぞ。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ