minmax(0, 1fr) 是防止网格轨道溢出的必要写法，必须显式声明以允许压缩至0，配合直接子元素 min-width: 0 才能激活裁剪、换行等效果。
minmax(0, 1fr) 是防止溢出的起点，不是可选项
只写 1fr 就等于 minmax(auto, 1fr)，浏览器会按内容最小固有宽度（min-content）拉宽轨道——一个无空格的长 URL 或 base64 字符串就能让整列撑开。必须显式写成 minmax(0, 1fr)，告诉轨道“允许压缩到 0”，否则后续所有裁剪、换行都无效。
常见错误：在 grid-template-columns 里用了 1fr，又给子项加 overflow: hidden，结果还是横向滚动。这不是样式没生效，是轨道压根没被允许收缩。
-
minmax(0, 1fr)必须写在轨道定义层，不能靠子项样式补救 - 搭配
repeat()时，优先用repeat(auto-fit, minmax(0, 1fr))，auto-fill会保留空轨道，反而加剧留白或挤压 - Safari 14.1 及更早版本对
0解析异常，可用@supports (grid-template-columns: minmax(0, 1fr)))做降级
子项必须加 min-width: 0，且只作用于直接子元素
minmax(0, 1fr) 开了门，但子项默认带 min-width: auto（等价于 min-content），它会顶住不进门。只有在网格容器的**直接子元素**上写 .grid > .item { min-width: 0; }，才能真正激活轨道压缩能力。
漏掉这步，overflow: hidden、text-overflow: ellipsis 全部失效——因为内容根本没“溢出”，而是把容器撑宽了。
- 如果子项内部用了
display: flex或display: grid，它的直接子元素也得加min-width: 0，否则撑开会逐层传导 - 别写
.item { min-width: 0; }这种泛匹配，可能污染非 Grid 上下文；用.grid > .item精准限定 -
<img>、<iframe></iframe>、<table> 等替换元素尤其容易漏掉父容器这步，导致图片撑破网格 <h3>文字截断和换行需要额外组合条件</h3> <p><code>min-width: 0只解决“能不能缩”，不决定“缩了之后怎么显示”。要让文字真正被处理，还得配对其他声明：- 单行省略：
min-width: 0+white-space: nowrap+overflow: hidden+text-overflow: ellipsis（四者缺一不可） - 多行省略：需
display: -webkit-box+-webkit-line-clamp+overflow: hidden，Firefox 需额外加display: block和line-clamp - 自动换行（推荐用于用户文本）：
min-width: 0+overflow-wrap: break-word - 暴力折行（适合哈希、token）：
min-width: 0+word-break: break-all，但 iOS 15 前 Safari 对此支持不稳定
图片和媒体元素必须单独约束尺寸
图片撑破网格，90% 是因为没管好它的父容器（网格项）和自身渲染行为。Grid 只分配轨道，不管内容怎么填。
-
<img>必须加max-width: 100%+height: auto，否则按原始尺寸渲染 - 如果网格项用了
display: flex，它的子元素（即<img>）也要加min-width: 0，否则 flex 默认的min-width: auto会阻止压缩 -
object-fit: cover或contain只控制“怎么填”，不控制“有没有空间填”——必须先有轨道尺寸（如grid-template-rows: 200px或minmax(0, 1fr)），它才有作用对象 - 小屏下慎用
minmax(300px, 1fr)这类固定下限，可能直接导致横向滚动；改用minmax(0, 1fr)并配合图片max-width更稳妥
- 单行省略：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
