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 控制