【CSS】コンテナクエリについて

こんにちは。
CSSの最近追加された要素を調べられてないな～と思いまして、
noteにまとめています。
今回はコンテナクエリについて調べました。

コンテナクエリとは

コンテナクエリと比べられるのがメディアクエリです。
従来のメディアクエリでは画面幅〇〇以上の時、横並びにする、などのレスポンシブデザインの時によく使うと思います。
一方、コンテナクエリは画面幅ではなく、親要素の幅で制御されます。

上記のサンプルでは、.card-wrapperの幅が400px以上のときに@containerを使って横並びにしています。

単純なコンテンツであればメディアクエリで良くない？と思うかもしれませんがサイドバーがあったり複雑なレスポンシブ対応などではコンテナクエリを使えばコーディングが楽になるかもしれませんね！

https://coliss.com/articles/build-websites/operation/css/about-css-container-queries.html
こちらのサンプルではコンテナの幅が大きくなると横並び、もっと大きくなるとコンテナ全体に画像＆テキストを中心に置くようになっています。

CSS コンテナクエリ考察 | grip on minds

こちらの記事にすごくよくコンテナクエリについてまとまっています。
やはり、全体のカードの並びはメディアクエリで指定し、中のカードのレイアウトはコンテナクエリで指定する・・・などの使い方が使い勝手良さそうです。