直接用 grid-template-columns 混写固定值和 1fr 是标准稳定做法；200px 1fr 可靠而 200px auto 常因内容撑开失效，因 auto 是 minmax(min-content, max-content)，1fr 则分配剩余空间。
直接用 grid-template-columns 混写固定值和 1fr 就行，这是标准、稳定、无需 polyfill 的做法。
为什么 200px 1fr 能工作，而 200px auto 常常失效
auto 不是“尽量窄”，而是 minmax(min-content, max-content)。只要左侧内容里有长单词、未设 max-width 的图片或 white-space: nowrap，它就会按最大内容宽度撑开整列，把 1fr 挤到极窄甚至为零。
- 典型现象：右侧主区突然变窄、文字换行错乱、容器出现横向滚动条
-
1fr则明确分配“容器宽度减去固定列、gap 和所有列的min-content后的剩余空间” - 想让固定列“尽可能紧凑但不溢出”，应改用
minmax(0, max-content)+min-width: 0（尤其对含 URL 或英文长串的子元素）
grid-template-columns: 240px 1fr 的硬性前提
这个写法本身没问题，但 90% 的失效都源于父容器没满足基础渲染条件：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器必须声明
display: grid - 父容器要有宽度上下文：比如
width: 100%、max-width: 1200px，或嵌套在 flex/grid 容器中；纯div直接放在body下且没设宽，1fr会按 0 计算 - 避免给网格项设
width、min-width或float，这些会覆盖 Grid 的轨道分配逻辑 - 别给父容器加
min-width: fit-content或width: max-content，它们会破坏弹性行为
中间固定、两边自适应怎么写
不是 1fr 200px 1fr 错了，而是顺序决定了计算逻辑：Grid 先预留中间 200px 的刚性空间，再把剩余宽度均分给左右两列。
- 正确写法：
1fr 200px 1fr—— 左右各占一半剩余空间 - 若想左边窄、右边宽，写成
1fr 200px 2fr，比例才起作用 - 别用
auto 200px auto：auto基于内容最小宽，没内容时左右会缩成一条线 - 小屏下容易挤压，建议搭配
@media退化为单列，或用minmax(0, 1fr)防内容溢出
真正容易被忽略的细节
1fr 的“剩余空间”不是简单减法。它还要扣除所有列的 min-content —— 比如主内容区有个 white-space: nowrap 的长字符串，它会让整行 min-content 变大，从而压缩 1fr 实际可分的空间。这不是 bug，是设计使然。响应式场景下，固定列（如 240px）始终不变，而 1fr 对应像素值动态重算，小屏可能触发横向滚动，得靠 minmax(300px, 1fr) 或媒体查询兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
