minmax(0, 1fr) 不合法，因最小值不能为0；应改用 minmax(min-content, 1fr) 或 minmax(auto, 1fr)，确保列有合理下限且自适应。
minmax() 里用 minmax(0, 1fr) 为什么不行？
直接写 minmax(0, 1fr) 会导致 Grid 容器拒绝渲染列——浏览器会报 Invalid value for grid-template-columns 或静默忽略该列定义。因为 minmax() 的第一个参数（最小值）不能为 0，也不能是无单位的 0；它需要一个**有效的长度值或关键字**（如 min-content、max-content、auto）。
正确做法是用 minmax(min-content, 1fr) 或 minmax(auto, 1fr)，让列在内容撑不开时收缩到内容宽度，有剩余空间时均分。
-
min-content：按文字不换行、图片不缩放的最小宽度计算，适合纯文本场景 -
auto：行为类似minmax(min-content, max-content)，但更贴近传统块级流，对内联元素和表单控件兼容性更好 - 避免写
minmax(1px, 1fr)——虽然语法合法，但 1px 最小值在小屏下可能强制截断内容，失去“自适应”本意
如何让某些列固定宽、其余列自适应且不溢出？
混合使用固定值、minmax() 和 fit-content() 是常见需求。例如三列布局：左侧图标栏固定 48px，中间标题自适应但不超 300px，右侧操作按钮自动收缩。
grid-template-columns: 48px minmax(0, 300px) fit-content(120px);
注意这里 minmax(0, 300px) 实际生效的是 minmax(min-content, 300px)（浏览器自动修正），所以安全。关键点：
立即学习“前端免费学习笔记（深入）”；
- 固定列（如
48px）写在最前，顺序影响fr分配逻辑 - 想限制最大宽度又保持弹性，优先选
minmax(min-content, 300px)，不是minmax(0, 300px) -
fit-content(120px)表示“最多取 120px，但可更小”，比minmax(0, 120px)更符合人眼预期
响应式中用 minmax() 配合 repeat(auto-fit, ...) 的坑
很多人写 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 想实现“每列至少 200px，多出来的平分”，结果发现小屏下单列占满、中屏变两列、大屏却卡在三列不动——这是因为 1fr 在 minmax() 的最大值位置时，会被当作“无限大”，导致浏览器无法判断何时该新增一列。
正确解法是把最大值设为明确约束：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))); /* ❌ 危险 */
grid-template-columns: repeat(auto-fit, minmax(200px, 300px))); /* ✅ 可控 */
grid-template-columns: repeat(auto-fit, minmax(200px, minmax(0, 1fr)))); /* ✅ 更灵活，但稍重 */
-
auto-fit+minmax(MIN, MAX)中，MAX必须是具体长度或min-content/max-content，不能是1fr - 真要动态均分，改用
repeat(auto-fill, minmax(200px, 1fr)))+grid-auto-flow: column;，再配合grid-auto-columns控制隐式列宽 - 移动端慎用
1fr在minmax()最大位，容易触发 Safari 的旧版解析 bug（iOS 15.4 以下）
内容为空时列塌陷，怎么保底显示？
当某列所有格子都为空（或仅含空格、 ），minmax(min-content, 1fr) 会让该列宽度归零，破坏布局节奏。这不是 bug，而是 min-content 的定义使然。
解决方式不是硬塞 ，而是用 CSS 层级干预：
- 给该列的
grid-column子项设置min-width: 0;（防止内容撑开）+width: 0;+visibility: hidden;，再用伪元素占位：::before { content: ""; display: block; width: 1px; } - 更稳妥：在 JS 层检测空列，动态加 class 触发
grid-template-columns: minmax(80px, 1fr) ...替换规则 - 设计阶段就约定“空列默认留白 64px”，直接用
minmax(64px, 1fr)——简单粗暴，多数业务场景够用
真正难处理的是跨行 + 空内容 + 自适应列的组合，这时候 minmax() 已不是核心问题，得回到 grid-area 布局源头检查语义是否合理。
