CSS container query 怎么让卡片按父容器宽度切换布局

卡片放进侧栏后仍然保持两列，放进主内容区又显得太松，这类问题通常不是 Grid 写错了，而是断点看错了对象：@media 读取的是视口宽度，组件真正需要的是父容器宽度。CSS container query 的做法是先在卡片外层声明 container-type: inline-size，再用 @container 让卡片在自己的容器里切换布局。

媒体查询为什么解决不了卡片的父容器问题

假设页面有一个两栏外壳：主区域宽度较大，侧栏只有 18rem。卡片组件同时出现在两处，写成 @media (min-width: 900px) 后，浏览器窗口足够宽时侧栏卡片也会收到“双列”规则，结果是标题和按钮挤在一起。

排查时先问一句：这个断点描述的是设备，还是组件可以使用的空间？前者适合媒体查询，后者应交给 container query。它的关键不是增加一个更精细的媒体断点，而是把响应式判断的边界从视口移到组件父容器。

先声明 inline-size，再让卡片读取最近容器

对横向卡片来说，通常只需要查询内联尺寸。inline-size 会让查询基于容器的内联方向尺寸，并避免为了查询高度而额外限制组件。最小结构如下：

      
边缘缓存策略
      
把摘要和操作按钮放在可复用卡片中。
    
    查看详情
  

.catalog {
  container-type: inline-size; /* 允许后代查询这个区域的内联尺寸 */
  padding: 1rem;
}

.card {
  display: grid;
  grid-template-columns: 1fr; /* 默认以窄容器的单列为安全基线 */
  gap: 1rem;
}

.card__action {
  justify-self: start;
}

这里的查询对象是 .catalog，不是 .card 自己。组件放到另一个声明了 container-type 的区域后，浏览器会按规则找到最近的合格祖先容器。

用 @container 在一个阈值切换卡片布局

接着把布局切换写在组件样式旁边。下面的 42rem 不是设备断点，而是“卡片所在区域足够宽时才允许双列”的设计约束：

@container (width >= 42rem) {
  .card {
    grid-template-columns: minmax(0, 1fr) auto; /* 宽容器显示正文和操作区 */
    align-items: center;
  }

  .card__action {
    justify-self: end; /* 只有宽容器才把按钮推到右侧 */
  }
}

把 .catalog 缩到 42rem 以下，卡片会回到单列；把它放进更宽的主区域，才会变成正文加操作区的双列。验证时不要只拖动浏览器窗口，应该同时改变外层网格的列宽，确认同一个卡片在不同父容器里分别响应。

命名容器和 cqi 解决哪些边界

页面出现嵌套容器时，匿名查询可能命中离卡片最近、但并非设计意图的容器。可以给目标容器命名，把意图写进规则：

.catalog {
  container: card-area / inline-size; /* 同时声明名称和查询类型 */
}

@container card-area (width >= 42rem) {
  .card__body {
    padding-inline: max(1rem, 2cqi); /* 让内边距参考 card-area */
  }
}

cqi 表示查询容器内联尺寸的百分之一，适合做组件内部的相对间距；它不是视口单位。不要为了炫技把所有字号都改成 cqi，文本仍应有可读的最小值，例如用 clamp() 限制上下界。

降级方案也要保留。若目标浏览器不支持容器查询，可用稳定的单列布局作为基础，并在产品允许时补一条媒体查询；这样旧环境少了双列，但内容仍能阅读，且不会因为未知规则把按钮挤出卡片。

@supports not (container-type: inline-size) {
  .card {
    grid-template-columns: 1fr; /* 不支持容器查询时保持可读 */
  }
}

常见问题

为什么写了 @container 但样式没有变化？

最常见原因是祖先没有 container-type，或者查询条件写在了错误的容器边界之外。先检查规则命中的元素和最近查询容器，再检查阈值是否真的被外层宽度跨过。

container-type 应该写在卡片还是卡片外层？

通常写在卡片外层。卡片是被响应的对象，外层才是它可用空间的测量边界；把查询类型写在卡片自身上，往往无法表达“卡片根据父容器变化”的关系。

container query 能完全替代 media query 吗？

不能。页面级导航、整体栏数和设备能力仍适合媒体查询；可复用组件内部的布局、字号和间距，才更适合容器查询。两者可以同时存在，但应该各自负责清晰的边界。

把断点从“浏览器有多宽”改成“组件拿到多少空间”，卡片才真正具备可复用的响应式行为。先用 inline-size 建立边界，再用 @container 写最少的切换规则，最后用命名容器和降级策略处理嵌套与兼容性。