最快写法是 grid-template-columns: 1fr 1fr，但真实场景需按右侧内容类型选择：固定尺寸用 minmax(0, max-content) 或 fit-content(32px)，长文本需加 min-width: 0 和 word-break；左固定右自适应推荐 240px 1fr；移动端切单列需完整重写模板。
直接用 grid-template-columns: 1fr 1fr 最快，但多数真实场景下它并不适用——真正“快速又可靠”的写法取决于你右侧内容的类型。
右侧是固定尺寸控件（如按钮、图标）时，别用 auto
很多人一上来就写 grid-template-columns: 1fr auto，结果右侧按钮把整行撑宽，左侧 1fr 缩水甚至消失。这是因为 auto 等价于 minmax(min-content, max-content)，浏览器不会主动压缩它。
- 改用
minmax(0, max-content)：明确告诉 Grid “可收缩到 0”，右侧内容才能真正“包住自己不抢空间” - 右侧子元素必须加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap，否则长文本仍会突破边界 - 如果按钮宽度恒定（比如 32px），直接写
fit-content(32px)更语义清晰，且 Safari 兼容更好
右侧是长文本或不可折行内容时，min-width: 0 是必选项
哪怕用了 minmax(0, max-content)，只要子元素是 <div> 包着一段 URL 或连续英文，它依然会撑开列宽——因为 Grid 默认给子项设了隐式的 min-width: auto。
- 在右侧子元素上强制加
min-width: 0，这是打破“内容优先”默认行为的关键开关 - 搭配
word-break: break-word或overflow-wrap: break-word，防止单个长词溢出 - 注意：这个
min-width: 0必须加在**实际承载文本的元素上**，不是 Grid 容器，也不是外层 wrapper
需要左固定右自适应时，240px 1fr 比百分比更稳
用 grid-template-columns: 20% 80% 看似直观，但一旦子元素带 min-width: 200px，整列就会撑破容器。而像素值 + 1fr 组合由 Grid 自动扣除 gap 后分配剩余空间，逻辑更可控。
立即学习“前端免费学习笔记（深入）”；
-
240px 1fr是最常用组合，左侧导航/侧边栏刚好不挤，右侧内容有足够呼吸感 - 想留弹性余量？换成
minmax(240px, 320px) 1fr，左栏在 240–320px 间自适应，超出部分全归右栏 - 不要混用单位写
240px 1fr 20%——fr和百分比权重计算方式不同，结果不可预测
移动端切单列，媒体查询里重写整条 grid-template-columns
别只改其中一列，也别试图用 auto-fit 应对简单两栏切换。响应式本质是“换布局”，不是“调参数”。
- 桌面端：
grid-template-columns: 240px 1fr - 移动端：
@media (max-width: 768px) { grid-template-columns: 1fr; }，干净利落 - 记得同步检查
gap和子项margin，窄屏下它们可能造成横向滚动条
最容易被忽略的其实是右侧子元素的继承行为：white-space: normal、min-width: fit-content 这类默认值，会在你写完 minmax(0, max-content) 后悄悄把它顶回去。动手前先用 DevTools 检查 computed 样式里的 min-width 和 white-space，比反复调 grid-template-columns 有效得多。
