CSS Container Queries (@container) を使ったカードコンポーネントの実装手順

/* MDN公式仕様：Container Queries の設定 */
.card-wrapper {
  /* 親要素をサイズ計算のコンテナとして宣言 */
  container-type: inline-size;
  container-name: card-container;
}

/* 親コンテナの横幅が 400px 以上になった場合のみ適用 */
@container card-container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
  }
}

MDN公式仕様：Media Queries と Container Queries の比較

項目	Media Queries (@media)	Container Queries (@container)
判断基準	ブラウザの画面全体（Viewport）の幅	直近の親コンテナの横幅
コンポーネント再利用性	× サイドバー配置時にレイアウト崩れ発生	◯ 配置場所問わず自動適応（完全再利用）
プロパティ指定	不要	親要素に container-type: inline-size が必須

---

実際に起こるトラブル：要素の高さが0pxに潰れる罠

MDN公式ドキュメントで注意喚起されている通り、container-type: size（幅と高さの両方を対象）を指定してしまうと、ブラウザの無限ループ防止のレイアウト封じ込め（containment）が働き、子要素のコンテンツ量に応じた高さ自動計算（height: auto）が無効化されて高さが 0px に潰れます。

カードコンポーネント等のレスポンシブ対応には、必ず幅方向のみを対象とする container-type: inline-size を指定してください。

---

実装手順

1. カード要素を包むラッパーDIV（.card-wrapper）に container-type: inline-size を付与する
2. 識別が必要な場合はショートハンド container: card-container / inline-size; を指定する
3. @container card-container (min-width: 480px) 内に横並びスタイルの切り替えコードを記述する

/* ショートハンドでの記述例 */
.card-wrapper {
  container: my-card / inline-size;
}

@container my-card (min-width: 480px) {
  .card-title {
    font-size: 1.5rem;
  }
}