写了display: grid却仍单列堆叠，根本原因是未显式声明grid-template-columns，grid默认为单列布局，必须设置如200px 1fr才能生效，且需注意min-content影响1fr分配、box-sizing和浏览器兼容性等问题。
直接用 grid-template-columns: 200px 1fr 就能实现左侧固定、右侧自适应，但多数人卡在“写了没效果”或“一加内容就崩”，问题不在 Grid 本身，而在隐式约束没满足。
为什么写了 display: grid 却还是单列堆叠？
Grid 不会自动猜你要几列——它默认就是单列布局。必须显式声明列轨道，否则所有子元素都挤进第一列。
- 错误写法：
display: grid单独存在，没配grid-template-columns - 正确写法：
grid-template-columns: 200px 1fr（左侧像素固定，右侧拿走剩余所有空间） - 别混用：
200px 100%是无效的，%在grid-template-columns中不被解析为相对值 - 旧版 Safari（iOS 16.4 以下）不支持
gap，需补-webkit-gap，但仅限 Grid 场景
1fr 没占满剩余宽度？检查这三处
1fr 分配的是「容器宽 − 固定列宽 − gap − 所有子项的 min-content 宽度」后的空间。内容一长，min-content 就悄悄抬高，1fr 可用空间就被压缩了。
- 右侧含
<table>：必须加 <code>table-layout: fixed和width: 100%，否则表格按内容撑宽整列 - 右侧有长 URL 或无空格文本：加
min-width: 0+overflow-wrap: break-word，否则 Grid 优先保内容不换行 - 父容器没设
box-sizing: border-box且带padding：加上gap后可能意外触发水平滚动条 - Flex 推荐写法：
.left { flex: 0 0 200px; }+.right { flex: 1; min-width: 0; box-sizing: border-box; } - Grid 推荐写法：
grid-template-columns: 200px 1fr;+gap: 1rem;+ 父容器box-sizing: border-box - IE10–11 不支持现代 Grid，Flex 需用旧语法
-ms-flex: 1；Safari 14–15 对flex: 1解析有偏差，建议显式写flex: 1 1 0 - 响应式切换时，Grid 改
grid-template-columns即可，Flex 要切flex-direction，但后者在 column 模式下flex: 1失效
Flex vs Grid：选哪个更稳？
Flex 实现左定右自适应更容错，Grid 更直观但对隐式规则更敏感。两者都依赖同一套底层逻辑：空间归属必须显式声明。
真正让布局崩掉的，从来不是写错一个 fr，而是右侧元素里藏了个没设 min-width: 0 的嵌套 Flex 容器，或一张没约束尺寸的图片——它们不会报错，但会悄悄抬高 min-content，把 1fr 的可用空间吃掉大半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
