容器查询与CSS Grid结合使用

CSS Grid的弹性列宽与容器查询结合，实现网格项尺寸变化时组件自动适应。

核心价值

Grid + Container Queries的组合解决：

• 网格列宽动态变化
• 网格项内容自适应
• 无需手动断点管理

Grid控制：列宽度动态分配
容器查询：组件响应列宽度变化

基础组合示例

Grid容器

<div class="grid">
  <div class="grid-item">
    <div class="card-container">
      <article class="card">...</article>
    </div>
  </div>
  <!-- 更多网格项 -->
</div>

/* Grid弹性布局 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

/* 网格项 */
.grid-item {
  /* 无需设置宽度 */
}

/* 容器声明 */
.card-container {
  container-type: inline-size;
}

/* 卡片样式 */
.card {
  padding: 16px;
  background: white;
  border-radius: 8px;
}

@container (min-width: 300px) {
  .card {
    padding: 24px;
  }
}

Grid自动适应原理

auto-fit + minmax

.grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* 行为：
1. 列最小宽度250px
2. 可用空间增加时列自动扩展
3. 列数根据视口动态变化
4. 每列宽度可能不同
*/

容器查询响应列宽

当列宽从250px扩展到400px时，容器查询自动调整：

@container (min-width: 350px) {
  .card {
    display: flex;
  }
}

网格项组件自适应

响应式卡片网格

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

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

.card {
  display: block;
  padding: 12px;
}

/* 列宽≥350px */
@container (min-width: 350px) {
  .card {
    display: flex;
    flex-direction: row;
    gap: 12px;
  }

  .card__image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
  }
}

/* 列宽≥450px */
@container (min-width: 450px) {
  .card {
    padding: 20px;
    gap: 20px;
  }

  .card__image {
    width: 150px;
    height: 120px;
  }

  .card__title {
    font-size: 20px;
  }
}

固定列宽Grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 每列宽度 = (容器宽度 - 2*gap) / 3 */
/* 容器宽度变化 → 列宽变化 → 卡片自适应 */

Grid Gap与容器宽度

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2cqw;  /* 基于Grid容器宽度的相对gap */
}

/* Grid容器声明 */
.grid {
  container-type: inline-size;
}

嵌套容器场景

Grid作为容器

/* Grid本身作为容器 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  container-type: inline-size;
}

/* Grid级响应 */
@container (min-width: 800px) {
  .grid {
    gap: 32px;
  }
}

网格项内部容器

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-item {
  container-type: inline-size;
}

/* 网格项内组件响应 */
@container (min-width: 300px) {
  .component {
    padding: 16px;
  }
}

实战案例：产品列表

<div class="product-grid">
  <div class="product-container">
    <div class="product">
      <img class="product__image" src="product.jpg">
      <h3 class="product__name">产品名称</h3>
      <p class="product__price">¥199</p>
      <button class="product__buy">购买</button>
    </div>
  </div>
  <!-- 更多产品 -->
</div>

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
}

.product-container {
  container-type: inline-size;
}

/* 小尺寸产品卡片 */
.product {
  text-align: center;
  padding: 12px;
}

.product__image {
  width: 100%;
  max-width: 150px;
  margin: 0 auto;
}

.product__name {
  font-size: 14px;
  margin: 8px 0;
}

.product__price {
  font-size: 18px;
  font-weight: 600;
  color: #e74c3c;
}

.product__buy {
  width: 100%;
  margin-top: 8px;
}

/* 中尺寸 */
@container (min-width: 280px) {
  .product {
    padding: 16px;
  }

  .product__image {
    max-width: 180px;
  }

  .product__name {
    font-size: 16px;
  }
}

/* 大尺寸 */
@container (min-width: 350px) {
  .product {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
  }

  .product__image {
    max-width: 220px;
  }

  .product__buy {
    width: auto;
    padding: 10px 24px;
  }
}

Grid响应式配合

媒体查询控制Grid + 容器查询控制组件

/* 媒体查询：Grid布局变化 */
.grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 容器查询：组件内部样式 */
.card-container {
  container-type: inline-size;
}

@container (min-width: 280px) {
  .card {
    padding: 16px;
  }
}

@container (min-width: 350px) {
  .card {
    display: flex;
  }
}

综合响应层级

视口变化（媒体查询）
    ↓
Grid列数/宽度变化
    ↓
网格项宽度变化
    ↓
容器查询触发
    ↓
组件样式自适应

Grid子网格配合

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: auto auto;
  gap: 20px;
}

.grid-item {
  display: grid;
  grid-template-rows: subgrid;  /* 子网格 */
  container-type: inline-size;
}

@container (min-width: 350px) {
  .grid-item {
    grid-template-columns: subgrid;
  }
}

要点总结

1. Grid的auto-fit+minmax让列宽动态变化
2. 容器查询让网格项内容响应列宽变化
3. 媒体查询控制Grid布局，容器查询控制组件样式
4. 可为Grid本身声明容器类型实现Grid级响应
5. 形成视口→Grid→组件的完整响应链路