gapを活用した最新CSSテクニック：margin不要のグリッドレイアウト完全ガイド｜DAD UNION

CSSにおける「gap」プロパティを用いて、グリッドレイアウトやフレックスボックスでの余白指定を行う方法について解説します。この技術を使うことで、従来のfloatやmarginによる余白指定から脱却し、よりシンプルで直感的なレイアウト作成が可能になります。ただし、この方法はInternet Explorerでは対応していない点に注意が必要です。

Contents

CSSの記述
HTMLの記述
デモページ
まとめ

CSSの記述

CSSでは、display: flexを用いたフレックスボックスエリア（クラス名：.flexarea）と、display: gridを用いたグリッドレイアウトエリア（クラス名：.gridarea）を用意します。両方のレイアウトでは、複数のdiv要素を格子状に配置し、gapプロパティを使用して上下左右の余白を指定します。

<style>
<!--
body{
  padding: 0;
  margin: 0;
}
h1{
  text-align:center;
  padding: 30px 0;
  font-size: 18px;
}
h2{
  font-size: 18px;
}
.wrap{
  width: 600px;
  margin: 0 auto;
}
.flexarea {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  gap: 20px 30px;
}
.flexarea > div {
  border: 1px solid #000000;
  background-color: #cccccc;
  flex: 1 1 auto;
  width: 100px;
  height: 90px;
}
.gridarea {
  display: grid;
  height: 300px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 30px 20px;
}
.gridarea > div {
  border: 1px solid #333333;
  background-color: #ffffff;
}
-->
</style>

　
このようにすることで、余白の指定がより簡単に、そして一貫性を持って行えるようになります。

HTMLの記述

HTMLでは、上記で定義したCSSクラスを適用します。例えば、フレックスボックスを用いたレイアウトは以下のように記述します。

<h1>CSSのgapで余白指定をして、gridとflexでmarginを使わないグリッドレイアウト</h1>

<div class="wrap">

<h2>display:flexを使ったグリッドレイアウト</h2>
<div class="flexarea">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<br>

<h2>display:gridを使ったグリッドレイアウト</h2>
<div class="gridarea">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

</div>

　
同様に、グリッドレイアウトを用いたエリアも、指定したクラスを適用して作成します。