Viewport基準から自立型コンポーネントへのパラダイムシフト

従来のレスポンシブWebデザインは画面全体の幅（Viewport）に依存していました。しかしコンポーネント指向全盛の現代、UIパーツは配置される親要素（サイドバーかメインカラムか）によって利用可能な横幅が異なります。

CSS Gridの「サブグリッド（Subgrid）」と「コンテナクエリ（Container Queries）」の登場により、レイアウトの柔軟性と保守性は劇的に向上しました。

レシピ1: カードの高さを揃えつつボタン位置を同期する subgrid

複数列のカードUIでタイトル文字数が不揃いな場合でも、各カード内の「画像・タイトル・本文・ボタン」の高さを横一列で完全に揃えられます。

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4; /* 画像・タイトル・本文・フッターの4行を親グリッドに同期 */
}

カードごとに高さを計算するJavaScriptは一切不要になります。

レシピ2: 自身の幅に応じてレイアウトが適応する @container

カードコンポーネント自身が、自分が置かれたコンテナ幅に応じて横並び・縦並びを自動切り替えします。

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

@container card-container (min-width: 450px) {
  .card-content {
    flex-direction: row; /* 横幅に余裕があれば横並びへ自動変形 */
  }
}

トップページの幅広エリアとサイドバーの狭いエリアの両方に、同一コンポーネントをそのまま使い回せます。

実務導入の考え方

主要モダンブラウザにおいて、サブグリッドおよびコンテナクエリはすでに完全対応に達しています。画面全体のbreakpointsによる破綻を脱却し、各コンポーネントが自立するCSS設計へ移行しましょう。