Grid布局中列宽被压缩的解决方法是使用minmax()在grid-template-columns中设置最小宽度，如minmax(200px, 1fr)，并配合auto-fit实现响应式等宽列，同时避免父容器覆盖、子项min-width:0等干扰。
Grid布局中，列宽被压缩到内容过窄，通常是因为没有为列设置合理的最小宽度约束。用 minmax() 是最直接有效的解决方式，关键在于正确设定下限值。
用 minmax(min, max) 锁定列的最小宽度
minmax() 接收两个参数：第一个是“最小允许宽度”，第二个是“最大允许宽度”。当设为 minmax(200px, 1fr)，表示该列至少保持 200px，剩余空间再按比例分配（1fr）。
- 最小值可以是固定值（如
200px）、相对单位（如10em），或弹性关键字（如min-content、max-content） - 最大值常用
1fr、auto或具体长度，避免写死导致无法响应 - 注意：不能把
minmax(1fr, 1fr)这类无效组合用于单列，它会退化为1fr，失去下限控制
结合 auto-fit / auto-fill 实现响应式等宽列
在动态列数场景（比如卡片列表），配合 repeat(auto-fit, minmax(250px, 1fr))) 可让浏览器自动计算最多能放几列，且每列不小于 250px。
-
auto-fit会合并空余轨道，使列尽可能撑满容器 -
auto-fill则保留所有可能轨道（包括空的），适合需要占位的布局 - 此时即使容器变窄，单列也不会跌破
250px，超出部分自动换行
避免 minmax 失效的常见情况
有时写了 minmax(200px, 1fr) 却仍被压缩，多半是其他样式干扰：
- 父容器设置了
grid-template-columns: repeat(3, 1fr)，覆盖了子项的minmax—— 要确保minmax写在grid-template-columns里，而不是子项上 - 子项设置了
min-width: 0或overflow: hidden，可能触发 Chrome 的 flex/grid 最小尺寸算法修正，强制压缩 - 容器本身 width 不足，且未设置
min-width，导致整体收缩连带影响列计算
基本上就这些。核心就是把下限明确写进 grid-template-columns 的 minmax() 里，再避开常见干扰项，列就不会被意外压扁了。
