コンテナクエリによるアダプティブグリッドレイアウト

複数のコンテナブレークポイントによるアダプティブグリッド

コンテナクエリは、狭いサイドバーウィジェットエリア、中程度のパネル、全幅セクションなど、あらゆるコンテキストで動作するグリッドコンポーネントに最適です。

CSS

.grid-container {
  container-type: inline-size;
  container-name: grid-area;
}

.adaptive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@container grid-area (min-width: 500px) {
  .adaptive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container grid-area (min-width: 800px) {
  .adaptive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

プログレッシブエンハンスメント

このアプローチはコンテナコンテキスト内でモバイルファーストの原則に従います：

1. デフォルト（500px未満）：1列 -- 狭いサイドバーやパネルで機能します。
2. 中（500px以上）：2列 -- 中程度の幅のコンテンツエリアに適しています。
3. 広い（800px以上）：3列 -- 十分な水平スペースを活用します。

auto-fillより優れている理由

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))でも同様のことが達成できますが、コンテナクエリはカラム数がいつ変更されるかを明示的に制御できます。デザインの一貫性のために特定の幅で特定のカラム数が必要な場合に重要です。