gapで余白指定をしてmarginを使わないグリッドレイアウト方法 DAD UNION

CSSのgapで余白指定をして、gridとflexでmarginを使わないグリッドレイアウトを行う方法をご紹介します。
私は今までfloatやmarginを使って余白を作り何番目のグリッドには余白（margin）を0にする等の対応を行ってましたが、グリッドレイアウトを使うとかなり便利です。（Internet Explorerは未対応）

Contents

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

gapで余白指定をして、gridとflexでmarginを使わないグリッドレイアウトを行う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>

gapで余白指定をして、gridとflexでmarginを使わないグリッドレイアウトを行うHTMLの記述

※display:flexを使ったグリッドレイアウトエリア（.flexarea）とdisplay:gridを使ったグリッドレイアウト（.gridarea）を用意してます。複数のdivをグリッドレイアウトにします。

<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>