CSS

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

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

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>

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

デモページ

実際の動作を確認するためのデモページがあります。以下のリンクからアクセスできます。

gapで余白指定をして、gridとflexでmarginを使わないグリッドレイアウトデモページ

まとめ

この方法を使えば、余白指定においてmarginを使わなくても、効率的かつ直感的なレイアウトが実現できます。特に複数の要素が等間隔で配置されるデザインにおいては、非常に有効です。ただし、古いブラウザでは対応していないことを念頭に置きつつ、最新のウェブ開発技術を活用していきましょう。

 

※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。