css grid 在容器查询中使用 fr 或 minmax() 配合 width 会导致宽度循环依赖，浏览器无法解析而降级为 0 或冻结布局；应改用 auto、minmax(min-content, max-content)、显式 inline-size 或 fit-content() 规避。
容器查询中 grid-template-columns 触发 width 循环怎么办
直接结论：CSS Grid 在容器查询（@container）里用 fr 或 minmax() 配合 width 会导致循环依赖，浏览器无法 resolve 宽度，最终降级为 0 或冻结布局。这不是 bug，而是规范明确禁止的“宽度自引用”行为。
为什么 container query + fr 会卡死
容器查询的触发前提是父容器有明确的尺寸（如 contain: layout size），而 fr 单位必须基于“可用宽度”计算——但这个可用宽度又依赖于子网格的渲染结果（比如子项的 min-content 或 width），形成闭环。浏览器在 layout 阶段无法打破这个循环，只能中断或 fallback。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
grid-template-columns: 1fr 2fr→ 需要先知道容器宽 → 容器宽由@container (min-width: 400px)决定 → 但该查询生效又依赖子网格是否撑开容器 -
minmax(200px, 1fr)同样失败：下限 200px 可解，但上限 1fr 仍需容器宽，而容器宽尚未确定 - 哪怕只写
repeat(auto-fit, minmax(200px, 1fr)))，只要父容器未显式设width或inline-size，就可能陷入 same-loop
能用的替代方案只有这几种
绕过循环的核心是：让列宽不依赖容器当前渲染宽度，改用绝对基准或内容驱动逻辑。
- 用
auto替代fr：例如grid-template-columns: auto 200px auto，中间列固定，两侧由内容自然包裹，不查容器宽 - 用
minmax(min-content, max-content)：完全交由子项内容决定列宽，跳过 fr 计算链 - 显式设容器
inline-size（不是width）：在容器查询规则里加inline-size: 300px，提供确定性基准，再放心用1fr - 换用
fit-content(300px)：既限制上限，又允许收缩，比minmax(0, 1fr)更安全，不触发循环
最容易被忽略的兼容性陷阱
Chrome 117+ 和 Safari 16.4+ 支持容器查询，但 Firefox 目前（2026 年 7 月）仍需 layout-contain 实验性前缀，且对 fr 的处理更保守——即使你写了 inline-size，它也可能忽略并 fallback 到 auto。实际部署前务必用 outline 检查每列真实宽度，别信 DevTools 的 computed 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
