grid-template-columns 混用 px 和 1fr 是标准写法，如 200px 1fr 实现左侧固定右侧自适应；需父容器有明确宽度上下文，否则 1fr 基准为 0 导致塌缩；中间固定两边自适应应写为 1fr 200px 1fr，避免用 auto；动态切换列数须同步修改 grid-template-columns，推荐用 CSS 变量配合 transition 实现平滑变化。
grid-template-columns 混用 px 和 1fr 是标准写法
直接写 grid-template-columns: 200px 1fr 就能实现左侧固定、右侧自适应；三列同理，如 200px 120px 1fr。浏览器原生支持良好，无需 polyfill 或降级处理。
关键前提是：父容器必须有明确的宽度上下文（比如设置了 width、max-width，或处于块级流中被约束），否则 1fr 的计算基准为 0，结果就是右侧列塌缩不可见。
常见错误现象：1fr 列没显示、宽度异常小、甚至整行错位——八成是忘了加 display: grid，或者父容器被 min-width: fit-content 这类破坏弹性行为的样式干扰了。
中间固定、两边自适应要写成 1fr 固定值 1fr
比如中间内容区固定 200px，左右栏均分剩余空间，正确写法是：grid-template-columns: 1fr 200px 1fr。顺序决定轨道分配逻辑：Grid 先预留中间 200px 的刚性空间，再把剩下的宽度平分给左右两列。
立即学习“前端免费学习笔记（深入）”；
别写成 auto 200px auto——auto 基于内容最小宽，两边没内容时会缩成一条线；而 1fr 能强制撑开，保证视觉结构稳定。
注意：如果子元素设置了 width 或 min-width，可能覆盖 Grid 分配逻辑，导致列宽异常。建议统一设 box-sizing: border-box 防止 padding/border 溢出错位。
动态切换列数时必须同步改 grid-template-columns
仅靠 display: none 隐藏某列，不会让其他列自动扩展——因为 Grid 的列轨道由 grid-template-columns 决定，与子元素显隐无关。
例如三列布局 240px 2fr 1fr，隐藏右侧列后，必须 JS 修改为 240px 1fr，否则中间列仍按原比例占位，留下空白。
实操建议：
- 用 CSS 变量定义列宽，比如
--sidebar: 240px，JS 只需改变量值 + 触发重绘 - 配合
transition: grid-template-columns 0.2s实现平滑缩放（注意：部分浏览器对该属性过渡支持有限） - 避免在
1fr列里放display: inline-block或浮动元素，它们可能触发收缩行为
小屏下固定列容易挤出视口，得提前兜底
固定列（如 200px）在小屏下不会自适应，而 1fr 会随容器变窄持续压缩，最终导致横向滚动或内容挤压。
推荐两种兜底方式：
- 用
minmax(0, 1fr)替代1fr，防止内容溢出破坏布局（但需配合overflow: hidden或word-break: break-word） - 媒体查询中切换为单列：
@media (max-width: 768px) { grid-template-columns: 1fr; }，比单纯隐藏列更干净
真正容易被忽略的是：当容器宽度本身随视口变化时，1fr 对应的像素值是动态重算的，但固定列始终不变——这个差异在响应式调试中必须手动验证，不能只看大屏效果。
