CSSのgapで余白指定をして、gridとflexでmarginを使わないグリッドレイアウトを行う方法をご紹介します。
私は今までfloatやmarginを使って余白を作り何番目のグリッドには余白(margin)を0にする等の対応を行ってましたが、グリッドレイアウトを使うとかなり便利です。(Internet Explorerは未対応)
Contents
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>
gapで余白指定をして、gridとflexでmarginを使わないグリッドレイアウトデモページ
gapで余白指定をして、gridとflexでmarginを使わないグリッドレイアウトデモページ
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告