容器查询生效的前提是显式声明 container-type: inline-size，否则 @container 规则不触发；需设在父容器（非 grid 本身），命名容器避免作用域冲突，且不可通过内联 style 动态设置。
container-type: inline-size 必须显式声明
容器查询生效的前提不是加了 @container 就行，而是目标元素必须被标记为「可查询容器」。CSS 默认所有元素都不是容器，不声明就查不到宽度变化。
常见错误是只写媒体查询那一套思维，漏掉容器声明：
/* ❌ 错误：没有 container-type，@container 规则完全不会触发 */
.card {
/* 没有设置 container-type */
}
<p>@container (min-width: 400px) {<br />
.card-grid { grid-template-columns: repeat(2, 1fr); }<br />
}正确做法是给父容器（比如卡片列表的 wrapper）加上 container-type: inline-size：
-
container-type只接受inline-size（推荐）或size；size需要同时满足宽高约束，兼容性差且容易失效 - 不要设在
grid容器本身上——它通常需要响应子项宽度，应设在其直接父级（如<section class="card-list"></section>） - Chrome 110+、Firefox 119+、Safari 16.4+ 支持；旧版 Safari 需用
@supports (container-type: inline-size)降级
grid-template-columns 在 @container 中不能用 calc() 动态计算
当你想根据容器宽度做更精细的列数控制（比如 300px → 1列，600px → 2列，900px → 3列），直接写 calc() 会静默失败——@container 里不支持表达式函数。
立即学习“前端免费学习笔记（深入）”；
错误示例：
/* ❌ 不会生效：calc() 在 @container 查询块内非法 */
@container (min-width: 600px) {
.grid { grid-template-columns: repeat(calc(100vw / 300), 1fr); }
}可行方案只有明确断点 + 静态值：
- 用多个
@container块覆盖不同区间，每块写死repeat(n, 1fr) - 避免用
minmax()或auto-fit混合写法——它们在容器查询中行为不稳定，尤其在 flex 容器嵌套 grid 时容易回退成单列 - 如果需要「等宽但不超过某值」，优先用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，但它属于 grid 自身逻辑，和容器查询无关
嵌套组件里 container-name 要避免冲突
当多个同类型组件（如多个 .product-card）并列，又各自内部有网格子结构，直接共用 container-type 会导致查询作用域混乱——浏览器按 DOM 顺序匹配最近的容器，而不是按语义。
典型问题：第二个卡片的网格模板被第一个卡片的容器查询规则覆盖。
- 用
container-name显式命名，再在@container中精确引用：@container card-layout (min-width: 480px) - 命名需唯一且合法（只能含字母、数字、短横线，不能以数字开头），例如
card-layout、sidebar-nav - 不命名 = 匿名容器，所有匿名容器共享同一作用域，极易误匹配
- 注意：Safari 目前对
container-name的支持仍弱于container-type，生产环境建议先测 Safari 实机
React/Vue 组件中 style 属性无法触发 container-type
用 style={{ containerType: 'inline-size' }} 或 :style="{ containerType: 'inline-size' }" 是无效的——CSS 容器查询依赖真实 CSS 属性，JSX/模板语法里的驼峰写法不会透传为 container-type。
必须走真实样式层：
- 写在
<style></style>标签或 CSS 文件里，例如.card-list { container-type: inline-size; } - 用
className或class绑定，别试图用内联 style 控制 - 动态切换容器类型？不行。CSS 容器类型不可运行时变更，改了也无效；需要换布局请用 class 切换整套规则
- SSR 场景下，确保服务端渲染的 HTML 已带好对应 class，否则首屏无容器查询效果
容器查询的「容器」不是语义概念，是 CSS 引擎里一个带尺寸监听能力的渲染盒子——少一个 container-type，整个链路就断了；多一个没命名的同级容器，规则就可能串行。真正卡住人的从来不是语法，而是这个盒子到底有没有被正确「注册」。
