Grid网格布局如何实现左侧固定右侧自适应_使用200px 1fr布局结构

最简洁方式是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 这个关键细节。