结论：用 grid-template-columns: 200px 1fr 或 1fr 2fr 最稳；避免 % 与 auto 混搭，防止内容撑开崩坏布局，fr 分配剩余空间更可控，配合 gap 管理间距，align-items 控制对齐，响应式直接重写列定义即可。
grid-template-columns 两列宽度怎么设才不踩坑
直接说结论：用 grid-template-columns: 200px 1fr 或 grid-template-columns: 1fr 2fr 最稳，别用 % 或 auto 混搭——后者在内容撑开时容易崩。
常见错误是写成 grid-template-columns: 200px auto，结果右侧列宽度随内容无限拉伸，挤压其他元素；或者用 50% 50%，但父容器有 padding 或 border 时，总宽超 100%，触发横向滚动。
-
px+fr组合：左侧定宽，右侧自适应剩余空间，最可控 -
fr之间比例：如1fr 2fr表示右侧占可用空间的 2/3，注意这是“分配剩余空间”，不是总宽比例 - 避免
auto：它基于内容最小宽度计算，一旦内容变长（比如长单词、未折行文本），列宽就不可控
两列等宽但要留间隙，gap 和 padding 别混用
很多人加了 gap: 16px 还手动给子元素加 padding，结果间距翻倍，列宽被进一步压缩。Grid 的 gap 是容器级控制，和子项内边距无关。
典型场景：卡片列表左右并排，中间需要 16px 空隙。此时只需在容器上设 gap: 16px，子项保持 margin: 0 即可。如果子项本身有 padding，那是为了内部留白，和列间距无关。
立即学习 “ 前端免费学习笔记（深入）”；
-
gap不影响列宽计算，只插入在轨道之间 - 若用
padding代替gap，会导致子项实际占用宽度增加，可能触发布局重排 - IE 不支持
gap，但现代项目基本不用考虑；真要兼容，改用margin+nth-child控制，不过那是另一回事了
内容高度不一致时，两列底部对不齐？用 align-items
左边一个短段落，右边一个长列表，结果两列底部参差不齐——这不是 Grid 的 bug，是默认行为。Grid 容器默认 align-items: stretch，但仅对“有明确高度定义”的子项生效；内容高度不定时，它其实没起作用。
真正起效的是给容器加 align-items: start 或 align-items: end，或者更稳妥地用 align-content: start（当有多行时）。
-
align-items控制单行内子项的交叉轴对齐（即列方向上的上下对齐） - 如果两列都设置了
min-height或height，stretch才会拉平；否则它只是“尽可能拉”，而“尽可能”取决于内容 - 别依赖
vertical-align，它对 Grid 子项无效
响应式切单列时，media query 里重写 grid-template-columns 就够了
不需要新增类名、不需 JS 切换，CSS 媒体查询里直接覆盖列定义是最轻量的做法。关键点在于：断点值别卡死在 768px 这种“经验数”，而要看内容实际换行临界点。
例如，当右侧列文字开始折行、整体阅读节奏变差时，就是该切单列的信号。这时候把 grid-template-columns 改成 1fr，所有子项自动堆叠，且顺序不变（Grid 顺序由源码决定，不受视觉流影响）。
- 别在媒体查询里动
display（比如从grid改成block），那样会丢失 Grid 的布局能力，后续再切回两列反而难维护 - 如果用了
fr单位，切单列时写grid-template-columns: 1fr而不是100%，语义更清晰，也避免百分比嵌套计算误差 - 注意 gap 在单列时是否还需保留：通常要，所以
gap写在媒体查询外更省事
最常被忽略的一点：Grid 的列宽定义只作用于直接子元素。如果你在两列中又嵌了一层 div 再放内容，那这个内层 div 不会自动撑满整列——得自己设 width: 100% 或 grid-column: 1 / -1。布局嵌套越深，越容易漏掉这一层控制。
