minmax(0, 1fr)必须写0而非0px，因旧版Safari将0px解析为无效值导致整条声明失效；0是无单位数值，语义为“可收缩至内容最小尺寸”，兼容性更好且能触发轨道压缩逻辑。
minmax(0, 1fr)为什么必须写成0而不是0px
写 minmax(0px, 1fr) 在旧版 Safari（iOS 14.1 及更早）里会被解析为无效值，整条 grid-template-columns 声明被丢弃，退回到单列或浏览器默认行为。而 minmax(0, 1fr) 中的 0 是无单位数值，在 CSS Grid 规范中明确表示“可收缩至内容最小尺寸”，兼容性更好。
这不是语义差别，是实际渲染差异：前者在 Safari 里等于没写，后者才能触发轨道压缩逻辑。
- 别用
minmax(0px, 1fr)，哪怕 IDE 提示“单位缺失”也别补 - 如果项目必须支持 iOS 13–14，加降级：
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); -
@supports检测要写全：@supports (grid-template-columns: minmax(0, 1fr))，不能只测display: grid
auto-fit 和 auto-fill 的选择直接影响小屏表现
repeat(auto-fit, minmax(0, 1fr)) 会让空轨道直接消失，剩余列均分宽度；repeat(auto-fill, minmax(0, 1fr)) 会保留空轨道占位，可能导致小屏下出现不可见但占空间的“幽灵列”，进而撑宽容器、引发横向滚动。
绝大多数响应式卡片/列表场景该用 auto-fit——它不光省空间，还能让内容真正“填满”可用宽度。
立即学习“前端免费学习笔记（深入）”；
- 用
auto-fit时，minmax()的最小值设为0才有意义；设成320px就和auto-fill行为趋同 - 只有当你需要 JS 动态插入新项且希望预留位置时，才考虑
auto-fill - 别混用：
repeat(auto-fit, minmax(0, 1fr)) 1fr这种写法会让最后一列抢走所有剩余空间，破坏比例
光改 grid-template-columns 不管用，子项必须加 min-width: 0
minmax(0, 1fr) 只是开了门，子项自己得愿意进门。网格直接子元素（比如 .grid > .card）默认有 min-width: auto，等价于 min-content，一个长 URL 或未换行英文单词就能把它钉死在原始宽度，轨道根本缩不动。
不加这句，overflow: hidden、text-overflow: ellipsis 全部失效——不是样式没生效，是内容压根没进入裁剪范围。
- 必须写
.grid > * { min-width: 0; }，不要只写.card类名，避免漏掉动态插入的项 - 图片、
<pre>、<table>等固有尺寸元素更要单独处理：img, pre, table { min-width: 0; } - 如果子项内部还有嵌套 Grid/Flex，它的直接子元素也得加
min-width: 0，否则撑开会传导
溢出控制真正起作用的位置不在 Grid 容器上
给 .grid 加 overflow: hidden 几乎没用。因为溢出发生在轨道计算阶段：浏览器先按子项 min-content 拉宽列，容器被动变宽，此时内容还没“溢出”，只是把容器撑大了。你加的 overflow 根本没东西可裁。
真正该加 overflow 的是网格直接子项，且必须配合 white-space 和 text-overflow 才能生效：
- 单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 多行截断：优先用
display: -webkit-box; -webkit-line-clamp: 2;，Firefox 需额外加overflow: hidden和text-overflow: clip - 自动换行：
overflow-wrap: break-word; word-break: break-word;，但前提是子项已设min-width: 0
最易忽略的是嵌套层级——你以为修好了外层 Grid，结果内层一个没加 min-width: 0 的 Flex 容器，就把整个布局又撑破了。
