gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA

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プロパティーは一切使っていません。 サンプルを別ウインドウ

[kns_1234]

marginを使わない、FigmaやXDと親和性が高い

[Shinwiki]

もうふつう(?)に解像度取得して変数入れてちょいちょい書けた方が良くない？

[uske_S]

marginを使わずgapで制御できる

[ajisaiotoko]

将来使うであろうプロパティ。

[misarine3]

この手のは対応ブラウザ待ちがどのくらいになるか次第だけど、考え方がシンプルになるのはよいことだ〜

[mayumayu_nimolove]

tailwindで知った