minmax(0, 1fr) 是轨道收缩开关，需配合子项 min-width: 0 才生效；子项还需 overflow: hidden 等裁剪样式，auto-fit + minmax(0, 1fr) 实现响应列数。
minmax(0, 1fr) 是轨道收缩的开关，不是万能补丁
浏览器对 1fr 的默认理解是 minmax(auto, 1fr)，也就是“最小不能小于内容本身宽度”。遇到长 URL、无空格英文、JSON 字段时，min-content 会远超分配空间，轨道被硬顶开——这不是 bug，是规范行为。写成 minmax(0, 1fr) 才是显式告诉浏览器：“这列允许缩到 0，别管内容多宽”。但它只作用于轨道定义层，不自动传导到子项。
光改 grid-template-columns 不生效，必须同步加 min-width: 0
minmax(0, 1fr) 只是开了门，子项得自己进门。网格直接子元素（如 .grid > .item）默认 min-width: auto，等价于 min-width: min-content，它会顶住不缩，轨道收缩失败。
- 必须写
.grid > * { min-width: 0; }，避免影响非 Grid 上下文 - 图片、
<pre>、<table>等固有尺寸元素尤其容易漏掉这步 - 若子项内还有嵌套
display: grid或display: flex，其直接子元素也得加min-width: 0
overflow: hidden 必须加在子项上，不是 Grid 容器
给 .grid 容器加 overflow: hidden 基本没用——撑破发生在轨道计算阶段，内容根本没“溢出容器”，而是让容器被动变宽了。真正需要裁剪的是子项自身。
- 单行截断：必须三者共存 ——
min-width: 0+white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 长文本换行：
min-width: 0+overflow-wrap: break-word（比word-break: break-word更安全） -
<img>或<iframe>还需额外加max-width: 100%，否则min-width: 0也救不了
auto-fit 和 repeat() 配合才能响应窄屏，auto-fill 会留空列
固定写 repeat(3, minmax(0, 1fr)) 仍是三列，无法适配小屏。要用 repeat(auto-fit, minmax(0, 1fr)) 让浏览器根据可用空间动态决定列数，空轨道自动收缩为 0。
立即学习“前端免费学习笔记（深入）”；
-
auto-fit：推荐首选，空列消失，剩余列拉伸填满 -
auto-fill：保留空轨道占位，适合需 JS 读取列数的场景 - 混用
minmax(0, 1fr) auto会导致auto列抢走最小宽度，破坏比例 - Safari 14.1 及更早版本对
0解析异常，可用@supports (grid-template-columns: minmax(0, 1fr)))做特性检测
复杂点不在写对 minmax(0, 1fr)，而在判断“该在哪一层加 min-width: 0”：是 Grid 容器？某条 grid-template-rows？还是某个 grid-area 的直接子元素？嵌套越深，漏掉一层，溢出就传导一层。
