CSS
置き場所の幅で形が決まる
このカードは画面幅を見ていません。親要素の幅だけを見て、縦積みと横並びを切り替えています。
3つのカードはHTMLもCSSクラスも完全に同じです。違うのは置かれている場所の幅だけ。ブラウザの幅を変えずに形が変わることを確かめてください。
置き場所 A — 幅いっぱい
このカードは画面幅を見ていません。親要素の幅だけを見て、縦積みと横並びを切り替えています。
置き場所 B — 中くらい
このカードは画面幅を見ていません。親要素の幅だけを見て、縦積みと横並びを切り替えています。
置き場所 C — サイドバー相当
このカードは画面幅を見ていません。親要素の幅だけを見て、縦積みと横並びを切り替えています。
メディアクエリで同じことをするには、置き場所ごとに別のクラスを作り、画面幅とレイアウトの対応表を頭の中で管理し続ける必要がありました。コンテナクエリでは、その対応表がカードのCSSの中に閉じます。