容器查询必须配合 container-type: inline-size 才能生效，Grid 是唯一能天然适配其尺寸变化节奏的布局系统；二者协同实现模块化响应式，缺一则退化为伪模块化。
容器查询（@container）必须配合 container-type: inline-size 才能生效，而 Grid 是唯一能天然适配其尺寸变化节奏的布局系统——两者不是“可以一起用”，而是“必须协同才能发挥模块化价值”。
为什么不能只用 Grid 做响应式？
Grid 的 fr 单位和 repeat(auto-fit, minmax(...)) 确实能根据容器宽度自动调整列数，但它不感知“断点语义”。比如你希望卡片在 300px 宽度下堆叠、450px 下双列、600px 上三列——Grid 自己不会主动切样式，它只是填满空间。真正的“组件行为切换”（如 flex-direction 改变、字体缩放、图片比例重设）必须由容器查询触发。
常见错误现象：@container (min-width: 400px) { .card { display: grid; } } 写了但没效果，原因往往是父级漏了 container-type: inline-size，或该父级被 display: contents / position: absolute 破坏了包含块上下文。
- Grid 负责结构弹性（轨道怎么排、间隙多大）
- 容器查询负责行为切换（什么时候该换结构、换什么）
- 二者缺一不可，否则就退化成“伪模块化”——组件仍需外部传参或 JS 干预
container-type: inline-size 的副作用必须提前处理
声明 container-type: inline-size 后，该元素会创建新的包含块，导致子元素的 position: absolute 定位基准、width: 100% 计算方式、甚至 transform 的渲染层都可能意外改变。这不是 bug，是规范明确要求的行为。
立即学习“前端免费学习笔记（深入）”；
典型场景：一个卡片组件内部有绝对定位的 badge，父容器加了 container-type 后 badge 错位了。
- 解决办法：给 badge 加
position: absolute同时显式设置inset-block-start/inset-inline-end，避免依赖隐式包含块 - 更稳妥做法：把容器查询声明放在更外层“纯包装盒”上（比如
.card-wrapper），让.card本身保持干净 - 注意：
container-name不是必需的，但多人协作时建议命名，避免@container规则冲突
Grid 轨道定义要预留“查询友好型”弹性
别写死 grid-template-columns: 100px 100px 100px —— 这种写法和容器查询完全脱节。真正模块化的写法是让 Grid 轨道能被容器查询“驱动”：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
@container (max-width: 400px) {
.card-grid {
grid-template-columns: 1fr;
}
}
@container (min-width: 401px) and (max-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
关键点：
- 基础轨道用
auto-fit + minmax()提供默认弹性，避免小屏下内容溢出 - 容器查询只做“覆盖”，不重复定义全部轨道逻辑
- 不要在
@container里改gap或justify-items，除非真有视觉需求；多数时候只需动列数和子项display方向
嵌套容器查询 + Grid 的边界在哪？
可以嵌套，但不推荐超过两层。比如 .dashboard → .sidebar → .card 都设 container-type，会导致样式规则爆炸、调试困难，且浏览器计算开销明显上升（尤其在滚动或 resize 时）。
真实项目中更合理的分层是：
- 最外层：页面级容器（
.main-content），用container: main / inline-size控制整体网格骨架 - 中间层：区域级容器（
.card-list），用container-type: inline-size控制卡片排列 - 最内层：组件自身（
.card）不设容器，只响应上级查询结果
容易被忽略的一点：@container 规则不支持伪类选择器嵌套（如 @container (min-width: 400px) { .card:hover { ... } } 是无效的），所有交互态样式必须写在常规选择器里，再靠容器查询控制其生效范围。
