CSS Container Queriesを実務で使ってみた

## メディアクエリの限界 サイドバーの有無でカードレイアウトを変えたい。メディアクエリではビューポート幅しか見れない。 ## Container Queries ```css .card-container { container-type: inline-size; container-name: card; } @container card (min-width: 400px) { .card { display: grid; grid-template-columns: 200px 1fr; } } @container card (max-width: 399px) { .card { display: block; } } ``` ## ブラウザサポート 2024年時点で主要ブラウザすべて対応済み。IE非対応（当然）。 ## 注意点 - `container-type: inline-size` は高さのcontainmentを含まない - `container-type: size` は高さも含むが、明示的な高さ指定が必要になることが多い - ネストしたコンテナは内側のコンテナが優先される