コンテナクエリによるレスポンシブカードコンポーネント

コンテナクエリによるレスポンシブカード

コンテナクエリは、狭いサイドバー、中程度のコンテンツエリア、広いヒーローセクションなど、異なるレイアウトコンテキストに表示されるカードコンポーネントに最適です。

CSS

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

仕組み

デフォルト（狭いコンテナ）では、カードは画像とテキストを縦に積み重ねます。コンテナが400pxに達すると、カードは左に画像、右にテキストの水平グリッドレイアウトに切り替わります。

コンテナクエリが勝る理由

メディアクエリでは、カードが十分な幅になるビューポート幅を正確に把握する必要があります。カードが3列グリッドから2列グリッドに移動すると、すべてのブレークポイントが壊れます。コンテナクエリは、カードがビューポートではなく自身のスペースに応答するため、この問題を解決します。

ポイント

1. container-type: inline-size はラッパーに幅ベースの包含を確立します。
2. container-name: card はネストされたレイアウトでこの特定のコンテナをターゲットできます。
3. min-width: 400px条件は、ラッパー自体が400px以上の幅になると発火します。
4. 同じ方法でさらにブレークポイント（例：600pxでより広いレイアウト）を追加できます。