minmax()的第二个参数不能是1fr，必须为明确尺寸如250px或max-content；子项需设min-width:0等防止撑开；响应式需重写grid-template-columns；ie11不支持需降级处理。
minmax() 的第二个参数不能写 1fr
很多人一上来就写 minmax(200px, 1fr)，结果发现列宽根本没约束——浏览器直接忽略这个值，退化为 auto。因为 minmax() 的最大值参数必须是明确尺寸（如 250px、max-content），1fr 是动态计算值，语法上不合法。
真正生效的写法是：
-
minmax(200px, 250px)：固定上下限，适合侧边栏有明确伸缩边界的场景 -
minmax(200px, max-content)：最小 200px，内容多时可撑开（但需防溢出） -
minmax(200px, min-content)：极少用，只在内容极简时收缩到最小文本宽度
fr 列被内容撑开？问题不在 grid，而在子项
即使写了 grid-template-columns: 240px minmax(320px, 1fr)，右侧列仍可能远超 320px——这不是 minmax() 失效，而是子项（比如图片、长单词、嵌套 flex 容器）默认有 min-width: auto，强行撑开轨道。
关键修复点：
- 给该 grid item 加
min-width: 0（触发 BFC，允许收缩） - 图片加
max-width: 100%; height: auto - 长文本加
overflow-wrap: break-word - 避免在 item 内用
display: flex却没设flex-shrink: 1
验证方式：打开开发者工具，看 computed width 是否仍大于预期；如果是，问题一定在子项，不是 grid 定义。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
响应式调整上下限必须重写 grid-template-columns
minmax() 本身不响应屏幕尺寸变化。想在小屏下让最小宽度从 320px 降到 240px，不能靠媒体查询改 minmax() 参数——得整条重写 grid-template-columns：
/* 默认 */
.container {
grid-template-columns: 240px minmax(320px, 250px);
}
/* 小屏 */
@media (max-width: 768px) {
.container {
grid-template-columns: 200px minmax(240px, 200px);
}
}
注意：上限值（如 250px）也得同步调小，否则小屏下可能列宽超出容器。
IE11 不支持 minmax() 和 fr，降级方案要提前准备
IE11 对 Grid 支持极弱：minmax()、fr、auto-fit 全部失效，整行回退为 block 流。如果必须兼容，得用 @supports 做特性检测：
@supports (display: grid) and (grid-template-columns: minmax(0, 1fr))) {
.container {
display: grid;
grid-template-columns: 240px minmax(320px, 250px);
}
}
@supports not (display: grid) {
.container { /* float / flex fallback */ }
}
真正容易被忽略的是：哪怕只用了一个 minmax()，整个 grid 布局在 IE11 就完全不可用——不是部分失效，是整套崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
