最稳写法是grid-template-columns: 200px 1fr，左侧固定200px，右侧无条件分剩余空间；需确保父容器有显式宽度、右侧设min-width: 0防自膨胀，并避免混用float/flex。
grid-template-columns: 200px 1fr 是最稳写法
别碰 auto 1fr，它在 Safari 和旧版 Chrome 里大概率失效——auto 实际是 minmax(min-content, max-content)，遇到长 URL 或未设 max-width 的图片，左侧列会撑宽整行，把右侧的 1fr 挤到几乎看不见。
直接用 200px 1fr：左侧硬固定，右侧无条件分剩余空间，不依赖内容宽度，也不触发 min-content 锁死。
-
200px是绝对值，但可随时响应式覆盖，比如@media (max-width: 768px) { .container { grid-template-columns: 60px 1fr; } } - 若需保留一点弹性（如防文字溢出），改用
minmax(200px, 200px) 1fr，第二个参数不能写auto，否则失去约束力 - IE11 不支持
1fr，必须降级为200px 1fr并配合@supports做兼容层
父容器必须有明确宽度上下文
grid-template-columns 不会凭空创造空间。如果父容器本身 width 是 auto 且没被约束，1fr 就没东西可分，右侧会塌成最小内容宽。
- 确保父容器有显式宽度来源：
width: 100%、max-width: 1200px、100vw，或嵌套在已设宽的 flex/grid 容器中 - 避免外层有
overflow: hidden截断 Grid 计算，尤其在 Safari 15.4 之前，这会让1fr表现异常 - 移动端务必加
box-sizing: border-box，否则 padding/border 会吃掉右侧可用宽度
右侧内容要防“自膨胀”，得配 min-width: 0
右侧即使写了 1fr，若内部有长单词、URL 或嵌套 flex 容器，默认 min-width: auto 会让它撑开自身，破坏“自适应”语义。
- 给右侧区域加
min-width: 0，强制它接受 Grid 分配的宽度，不反向挤压左侧 - 右侧子元素若有
white-space: nowrap或width: 100%，也要检查是否覆盖了 Grid 的列约束 - Safari 14–15 下，若右侧有 border/padding 且没设
box-sizing: border-box，1fr算出来的空间会偏小，右侧可能窄得只剩一条缝
别混用 Grid 和 float/flex 在同一容器内
Grid 是独立布局上下文。一旦父容器设了 display: grid，里面再写 float: left 或 display: flex，这些声明不会影响 Grid 列分配逻辑，反而容易让开发者误判问题来源。
- 浮动元素会脱离 Grid 流，导致高度塌陷、对齐错乱；flex 子项在 Grid 容器里只是普通 grid item，
flex-grow失效 - 想嵌套布局？把右侧区域单独抽成子容器，再在它内部用 flex 或 grid，而不是在顶层 grid 容器里混搭
- 调试时优先查
display: grid是否生效、grid-template-columns值是否被覆盖、右侧元素是否意外继承了min-width: auto
真正的难点不在写对那几行 CSS，而在于理解 1fr 不是“填满可视区”，而是“按比例分父容器主轴剩余空间”——这个“剩余”，必须由你亲手给父容器划出边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
