@container规则必须显式声明container-type: inline-size才生效，否则静默失效；常见原因是父元素漏设该属性，且容器需有稳定可测宽度，如grid容器推荐直接设置，其子项需加min-width: 0等确保可测。
container-type 必须显式声明，否则 @container 规则完全不执行
写了 @container (min-width: 400px) 却没生效？90% 是因为父元素漏了 container-type: inline-size。CSS 引擎默认不把任何元素当容器——它不会主动测量 div 的宽度来触发查询。你得亲手告诉它：“这个元素要当容器”。inline-size 最常用（对应宽度），block-size 对应高度但支持度低（Chrome 117+ 才稳定）。不要用 container-type: normal 或 content，它们不包含尺寸监听能力。
Grid 容器本身就能当 container，但子项需打破最小尺寸限制
把 container-type: inline-size 加在 display: grid 元素上是安全且推荐的——它天然有明确尺寸上下文。但如果你试图在它的直接子项（grid item）上写 @container，大概率失败。原因：grid item 默认受 min-width: auto 约束，内容撑不开时宽度为 0，无法被测量。解决办法：
- 给该子项加
min-width: 0或width: fit-content - 或者更干脆：把容器查询逻辑上移到 grid 容器自身，让子项样式通过
@container响应父 grid 的宽度
@container 与 grid-template-columns 配合时，单位要用 cqw 而非 vw
当你想让 grid 列数随容器变而自动调整，比如 “容器宽 ≥500px 时显示 3 列，否则 2 列”，不能写 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 然后靠 media query 切换——那是视口逻辑。正确做法：
- 给 grid 容器设
container-type: inline-size - 在
@container (min-width: 500px)里写grid-template-columns: repeat(3, 1fr) - 在
@container (max-width: 499px)里写grid-template-columns: repeat(2, 1fr) - 若需等比缩放列间距，用
gap: 1cqw（1% 容器宽），不是1vw
cqw 是容器查询专属单位，值随容器宽度实时重算；vw 永远绑定视口，混用会导致错位。
嵌套 Grid + Container Queries 容易掉进 overflow 或 contain 冲突坑
多层嵌套时（比如 grid 容器里再套一个 grid），常见失效场景：
- 外层 grid 容器设了
overflow: hidden，导致内层容器尺寸无法准确测量 - 外层用了
contain: layout但没加size，@container直接静默忽略 - 同时给同一元素设
container-type: inline-size和contain: size—— 不冲突，但后者是冗余的；container-type已隐含必要的隔离行为 - 用
display: contents包裹容器元素？Chrome 114+ 才支持，旧版直接跳过整个查询
container-type，且其尺寸必须能被浏览器稳定读取——这意味着它不能被 overflow、transform 或父级 contain: paint 截断。立即学习“前端免费学习笔记（深入）”；
最常被忽略的一点：容器查询不是“只要写了就跑”，它依赖浏览器对布局盒的精确测量。哪怕只是少了一个 min-width: 0 或多了一个 overflow: hidden，整个链路就断了——而且不会报错，只会静默失效。
