minmax(0, 1fr)能修复Grid溢出，因其将轨道最小宽度设为0，配合子项min-width: 0才能真正压缩；需同步处理嵌套容器、固有尺寸元素及文字/图片约束，并慎用auto-fit与兼容性降级。
minmax(0, 1fr)为什么能修Grid溢出
因为1fr本身不设下限，浏览器会按子项min-content（比如长URL、未换行英文单词、图片固有宽）拉宽轨道，容器被动撑开。而minmax(0, 1fr)显式把轨道最小宽度设为0，允许它压缩到内容实际所需尺寸——这是从布局计算源头释放弹性的关键一步。
必须同步加min-width: 0才生效
minmax(0, 1fr)只是开了门，子项得愿意进门。网格直接子元素（如.grid > .item）默认min-width: auto，会顶住不缩，导致轨道收缩失败。此时overflow: hidden完全无效。
-
.grid > .item { min-width: 0; }是硬性要求，不能只写.item（避免污染其他上下文） - 若子项内嵌
Flex或Grid，其直接子元素也得加min-width: 0 - 图片、
<pre>、<table>等固有尺寸元素特别容易漏掉这步
搭配auto-fit做响应式列数
固定列数（如repeat(3, 1fr)）在小屏下必然挤或溢出。repeat(auto-fit, minmax(0, 1fr))才能让列数随屏幕动态变化：空列被丢弃，剩余列均分可用空间。
- 别用
auto-fill——它保留空轨道，窄屏下反而留白或撑宽 - 不要混用
minmax(0, 1fr)和auto，auto列会抢走最小宽度，破坏比例 - 若需保底宽度（如卡片最小300px），改用
minmax(300px, 1fr)，但小屏下仍可能因最小值过大导致列数骤减
文字截断和图片约束不能少
轨道缩了，子项内容还得配合渲染行为，否则照样跑出边界。
立即学习“前端免费学习笔记（深入）”；
- 单行截断需三者齐备：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 图片必须加
max-width: 100%+height: auto，否则固有尺寸直接突破轨道 -
<img>父容器若含padding或border，子项还得加box-sizing: border-box+width: 100% - Safari 14.1及更早对
minmax(0, 1fr)解析异常，可用@supports (grid-template-columns: minmax(0, 1fr)))做特性检测降级
minmax(0, 1fr)，而是在多层嵌套中判断“该在哪一层加”——是Grid容器？某条grid-template-rows？还是某个grid-area的直接子元素？漏掉一层，溢出就还在那儿。 
