minmax(0, 1fr) 是防溢出的起点，因其显式允许轨道缩至0，配合子项 min-width: 0 才能真正触发弹性收缩并避免容器被长内容撑宽。
minmax(0, 1fr) 为什么是防溢出的起点
直接写 1fr 的列默认没有收缩下限，浏览器会优先保障子项的 min-content（比如一个无空格长 URL 或未设 white-space 的英文单词），导致整列被顶宽，容器横向滚动。而 minmax(0, 1fr) 显式告诉轨道：“你可以缩到 0，别硬撑”。这不是技巧，是释放 fr 弹性的必要声明。
常见错误是只改 grid-template-columns 却不碰子项样式——minmax(0, 1fr) 只开了门，子项得自己愿意进门。
-
minmax(0, 1fr)必须配合.grid > *的min-width: 0才生效 - Safari 14.1 及更早版本对
0解析异常，可用@supports (grid-template-columns: minmax(0, 1fr)))做特性检测 - 避免混用：
minmax(0, 1fr) auto会让auto列抢走最小宽度，破坏比例
子项必须加 min-width: 0 才能触发裁剪
Grid 容器的 overflow: hidden 本身拦不住撑破行为——因为溢出发生在轨道计算阶段，内容根本没“溢出容器”，而是把容器拉宽了。真正要裁剪的是网格直接子项（.grid > .item）自身。
子项默认 min-width: auto（等价于 min-content），它会顶住不缩，导致轨道收缩失败。只有两者配合，overflow: hidden 才有机会起作用。
- 必须写成
.grid > .item { min-width: 0; }，避免影响非 Grid 上下文 - 图片、
<pre class="brush:php;toolbar:false;"></pre>、<table> 等固有尺寸元素尤其容易漏掉这步 <li>若子项内还有嵌套 Grid 或 Flex，其直接子元素也得加 <code>min-width: 0，否则溢出会传导 - 单行截断：必须同时写
white-space: nowrap、overflow: hidden、text-overflow: ellipsis - 多行截断：
display: -webkit-box+-webkit-line-clamp+overflow: hidden（Firefox 需额外处理） - 自动换行：
overflow-wrap: break-word或word-break: break-word，同样依赖min-width: 0 -
overflow: hidden对display: contents或visibility: collapse的子项完全无效 - 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))) - 列内元素仍需设
min-width: 0，尤其含图片或<iframe></iframe>时 - 图片/视频务必加
max-width: 100%和height: auto
文字截断或换行需要额外渲染控制
光有轨道收缩和 min-width: 0 不代表文字自动换行或省略。子项内部仍需显式控制文本行为，否则长内容会继续撑开子项边界。
响应式列数要用 auto-fit 配合 minmax()
固定写 repeat(3, minmax(0, 1fr)) 无法适配窄屏。真正防溢出的响应式方案是让列数随容器动态变化，而不是强行塞三列。
auto-fit 会在填不满时把空轨道收缩为 0，视觉更干净；auto-fill 则保留空位，适合需要 JS 监听列数的场景。二者都必须配合 minmax() 使用，单独写 auto-fit 无意义。
minmax(0, 1fr)，而是在多层嵌套中判断“该在哪一层加”：是 Grid 容器？某条 grid-template-rows？还是某个 grid-area 的直接子元素？漏掉任何一层，溢出就可能从那里钻出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
