fr单位与固定值（如px、%、rem）可在grid-template-columns中自由混用，固定值先占位，剩余空间按fr比例分配；minmax()可为固定列添加弹性边界，auto-fit配合minmax()能自动适配列数。
grid-template-columns 里混用 fr 和固定值直接生效
在 grid-template-columns 中，fr 单位和像素（px）、百分比（%）、rem 等固定尺寸可以自由组合，浏览器会按定义顺序分配空间：固定宽度先占位，剩余空间再按 fr 比例切分。
常见错误是以为必须全用 fr 或全用固定值——其实完全不需要。只要列定义合法，CSS Grid 就能正确解析。
- 写法示例：
grid-template-columns: 200px 1fr 300px 2fr; - 含义：第1列固定
200px，第2列占剩余空间的 1 份，第3列固定300px，第4列占剩余空间的 2 份 - 注意：固定列宽不会被拉伸，即使容器变宽；
fr列才会动态响应
固定列宽 + minmax() 防止内容撑破或缩太小
纯 200px 在某些场景下太死板：比如内容超长时溢出，或容器窄到无法容纳时出现横向滚动。这时候该用 minmax() 给固定列加弹性边界。
典型场景：侧边栏需要「至少 200px、最多不超 240px」，主内容区用 1fr 填充剩余空间。
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: minmax(200px, 240px) 1fr;
-
minmax(200px, 240px)表示该列宽度在200px到240px之间自适应，优先取最小值，有余量再扩展 - 如果容器总宽不足以容纳所有
minmax()的最小值之和，Grid 会按比例压缩（但不会低于min） - 和纯
px相比，minmax()更健壮，尤其配合auto-fit/auto-fill使用时
auto-fit + minmax() 替代手写固定列数
当不确定要放几列，但每列都要「固定最小宽度」时，别硬写一堆 200px 200px 200px——用 auto-fit 配合 minmax() 让 Grid 自动计算列数。
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) );
- 这行代码会让 Grid 在容器内尽可能多地放入「不小于
250px」的列，空余空间平均分给所有列（因为最大值设为1fr） - 如果希望某列「始终固定 250px 不参与伸缩」，就不能用
auto-fit，得回到手动定义列宽的方式 -
auto-fit和auto-fill的区别在于：前者会合并空轨道，后者保留所有可能轨道（哪怕为空），多数情况选auto-fit
固定列宽模块内部内容溢出要主动处理
设置了 200px 宽度的网格项，如果子元素是长文本或大图，很容易撑破或换行异常。Grid 只管布局，不管内部渲染。
常见表现：overflow: hidden 不生效、文字不折行、图片溢出边界。
- 强制折行：
word-break: break-word;或overflow-wrap: break-word; - 图片等替换元素限制宽度：
img { max-width: 100%; height: auto; } - 避免
white-space: nowrap意外继承进来 - 如果用了
display: flex内部布局，记得给子项加flex-shrink: 0或overflow控制
200px 就会变成 bug 的起点。 
