必须同时设置 container-type 和 contain: size，否则 @container 规则静默失效；css 变量不能用于 @container 查询条件，仅可在命中后的样式块中使用；容器需满足尺寸可测性，且子元素须约束溢出以保障布局稳定。
必须同时设置 container-type 和 contain: size，否则 @container 规则静默失效——不是不生效，是根本不会被浏览器评估。
为什么 @container 里不能写 var(--breakpoint)
CSS 变量无法在 @container 的条件括号内参与计算。比如 @container (min-width: var(--card-min)) 是无效语法，整条规则会被忽略。这不是兼容性问题，而是 CSS 规范明确禁止：查询条件必须是可解析的静态长度值。
变量真正能起作用的地方，是在查询命中后的样式块内部：
:root { --card-min-width: 280px; }- 在
@container (min-width: 480px)命中后，用minmax(var(--card-min-width), 1fr)控制网格列宽 - 或通过
--card-layout: row这类语义化变量控制flex-direction，再用属性选择器联动
container-type 和 contain 缺一不可
只写 container-type: inline-size 不够；只写 contain: layout style size 也不行。两者必须共存，容器才具备“可查询尺寸”。
常见漏配场景：
- 写了
container-name: card却忘了container-type→ 完全不触发 - 用了
contain: content→ 尺寸不可测，@container失效 - 容器是
display: flex的直接子项，且没设min-width: 0→ Flex 子项默认min-width: auto，会撑满、阻断宽度收敛
卡片内容撑破网格？不是变量的问题，是子元素失控
即使 @container 正确命中、grid-template-columns 算出 3 列，一张卡片仍可能因内部图片没设 width: 100% 或文字没截断而高度突兀，破坏对齐。
关键修复点：
- 卡片本身加
min-width: 0（尤其内部有display: flex或长文本时） - 图片强制
width: 100%; height: auto; - 标题类文本加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - 别依赖
gap来“掩盖”溢出——它只管轨道间距，不管内容是否越界
真正难的从来不是写 @container，而是让容器尺寸稳定可测：它要求你清楚 contain 的隔离边界、Flex/Grid 的尺寸传播逻辑，以及 DOM 结构是否破坏了包含块关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
