CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
![gapの余白指定が便利! gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/b35a8960b2bc7f665a90a90550de5b1c7282f47e/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F210628%2Fimages%2Feyecatch.jpg)