@container可替代@media实现组件级Grid响应式：先设父容器container-type: inline-size，再用@container(min-width:400px)调整grid-template-columns等属性，并配合cqw单位与aspect-ratio保障缩放一致性。
直接用 @container 替代 @media 声明 Grid 列数，是目前最干净的微响应式路径——它不依赖视口，只看父容器实际宽度，组件挪到哪都能自适应。
怎么写一个带容器查询的 Grid 卡片布局？
核心是三步：设容器、写查询、调 Grid。不是所有父元素都能被查，必须显式声明 container-type: inline-size。
- 给卡片外层容器加
container-type: inline-size（不能只靠 class 名或 display 属性自动识别） - 在子元素上用
@container (min-width: 400px)控制 Grid 行列结构，比如从grid-template-columns: 1fr切到200px 1fr - 别漏掉
gap和aspect-ratio的响应式同步调整，否则小容器里图片会撑破布局
示例：
.card-container {
container-type: inline-size;
}
<p>.card {
display: grid;
gap: 0.75rem;
}</p><p>@container (min-width: 400px) {
.card {
grid-template-columns: auto 1fr;
}
.card-image {
aspect-ratio: 1;
}
}</p><p>@container (min-width: 600px) {
.card {
grid-template-columns: auto 1fr auto;
}
.card-actions {
justify-self: end;
}
}为什么 @container 有时不生效？
不是语法错，而是容器上下文没建立成功。常见断点失效原因集中在“谁才是容器”这个判断上。
立即学习“前端免费学习笔记（深入）”；
- 父元素没有设置
container-type，哪怕它有display: grid或width: 100%也不行 - 父元素被设置了
overflow: hidden或contain: layout，会阻断容器查询链（Chrome 125+ 已修复部分 case，但 Safari 17.6 仍敏感） - 用了
container-name却在@container查询里没指定名字，比如写了container-name: card，但查询写成@container (min-width: 400px)而非@container card (min-width: 400px)
Grid + Container Queries 配合 cqw 单位做等比缩放
cqw 是容器宽度的 1%，它让 Grid 的列宽、间隙、字体能随容器实时缩放，比媒体查询更细腻——尤其适合嵌套卡片或仪表盘小部件。
- 用
grid-template-columns: repeat(auto-fit, minmax(25cqw, 1fr))可让列数随容器宽度平滑增减，且每列最小宽度始终是容器宽的 25% -
gap: 1cqw比固定gap: 8px更安全：小容器自动收紧间距，大容器自然舒展 - 注意：
cqw不支持在minmax()外部直接参与计算，比如calc(25cqw - 1rem)合法，但25cqw - 1rem（无 calc 包裹）会无效
IE11 或旧版 Safari 怎么降级？
Container Queries 是 2023 年才全面落地的特性，Safari 16.4+、Chrome 110+、Firefox 119+ 才原生支持。旧环境必须回退到 @media + Grid。
- 不要试图 polyfill
@container——目前无可靠方案，强行注入 JS 模拟会破坏渲染性能 - 用
@supports not (container-type: inline-size)包一层降级样式，里面写传统媒体查询逻辑 - 避免在同一个选择器里混用
@container和@media，CSS 解析器可能跳过整个块（特别是当@container语法错误时）
真正容易被忽略的是容器嵌套深度：如果一个 .card 在 .sidebar 内，而 .sidebar 又在 .dashboard-grid 内，只有最靠近的、设置了 container-type 的祖先才算“查询容器”——中间任何一层没声明，就断链了。
