最简洁方式是grid-template-columns: 200px 1fr；左侧固定200px，右侧占剩余空间，需为右侧项设min-width: 0防止溢出，响应式可配合@media调整。
用 Grid 实现左侧固定、右侧自适应，最简洁的方式就是定义两列：第一列 200px（固定宽），第二列 1fr（占满剩余空间）。
基础 Grid 列定义
在容器上设置 display: grid，并通过 grid-template-columns 指定列宽：
-
grid-template-columns: 200px 1fr;—— 左侧严格 200px，右侧自动伸缩填满剩余宽度 - 无需设置行高或额外约束，Grid 会默认按内容高度撑开
- 注意：
1fr不是百分比，而是“剩余可用空间的 1 等份”，即使窗口变窄，它也会动态收缩（最小可到内容宽度）
避免右侧内容溢出或换行异常
右侧区域如果放长文本、表格或内联元素，可能因无断点而横向溢出。建议加一行保护：
- 给右侧网格项（比如
.right）设置min-width: 0;—— 这能激活 fr 轨道的最小尺寸计算，允许内容正常换行 - 如需文字强制换行，可加
word-break: break-word;或overflow-wrap: break-word;
补充常用微调技巧
实际项目中常需要一点灵活性：
- 想让右侧最小不小于 300px？写成
grid-template-columns: 200px minmax(300px, 1fr); - 要加间隙？用
gap: 12px;（同时作用于行列），别用 margin，Grid 间隙更可控 - 若左侧需响应式隐藏（如移动端），可配合
@media改为grid-template-columns: 1fr;，并用display: none隐藏左区
基本上就这些。200px + 1fr 是 Grid 中最轻量、最可靠的左右布局模式之一，不复杂但容易忽略 min-width: 0 这个关键细节。
