要实现左侧固定200px、右侧自适应的两栏布局，必须显式声明grid-template-columns: 200px 1fr；仅设display: grid默认单列，且1fr生效需父容器有明确宽度、内容可换行、盒模型为border-box。
直接用 grid-template-columns: 200px 1fr 就能实现左侧固定、右侧自适应，但漏写这行声明或写错单位，布局就会完全失效——Grid 不会“猜”你要几列。
为什么写了 display: grid 却只显示一列？
因为 Grid 默认是单列流，不定义列轨道，所有子元素全塞进第一列。这不是 bug，是规范行为。
- 必须显式声明
grid-template-columns: 200px 1fr（左侧 200px 固定，右侧占剩余全部） - 别混用
200px 100%：百分比在 Grid 中按父容器宽度计算，第二列会试图占满整个容器，把左侧挤出视口 - 如果要兼容老 Safari（14–15），可改用
minmax(0, 1fr)防止小屏下右侧塌缩
1fr 不生效？检查这三个隐性前提
1fr 不是魔法，它依赖容器有明确的可用主轴空间。常见失效场景不是语法错，而是上下文缺失。
- 父容器没设
width（如width: 100%或max-width: 100vw），浏览器算不出“剩余空间”是多少 - 右侧内容含长单词、URL 或未设
table-layout: fixed的<table>，会强制撑开自身，突破1fr约束 - 没加
box-sizing: border-box，而左侧/右侧又带padding或border，Safari 和移动端会把它们当额外宽度，导致右侧变窄甚至消失
右侧内容溢出换行失败，光靠 min-width: 0 不够
min-width: 0 能防 flex 容器收缩异常，但在 Grid 里它不解决文本溢出问题。真正卡住的是内容本身的换行策略。
立即学习“前端免费学习笔记（深入）”；
- 右侧需加
overflow-wrap: break-word（推荐）或word-break: break-word - 若含图片或嵌套块级元素，补上
max-width: 100%防止撑破列宽 - 避免在右侧元素上设
white-space: nowrap，否则break-word无效
真正让 Grid 两栏“稳”的，从来不是多写几行 CSS，而是把父容器宽度来源、盒模型边界、内容换行约束这三件事一次性对齐。少一个，就可能在 Safari 移动端或 Firefox 小屏下突然翻车。
