Grid容器的overflow: hidden不阻止轨道撑开，真正起效的是minmax(0, 1fr)配合网格直接子项的min-width: 0；裁剪需作用于网格项自身，而非容器。
不是“overflow导致布局被裁剪”，而是你加的位置错了——Grid容器的overflow: hidden根本不管子项的布局尺寸，只裁它自己盒模型外的内容；真正撑破容器的是轨道（track）计算阶段的行为，和overflow无关。
Grid容器加overflow: hidden为什么看起来没用
浏览器渲染 Grid 时，先根据子项的min-content（比如一个无换行的长URL、图片原始宽、未设min-width的文本块）确定列宽或行高。这个过程发生在布局阶段，overflow此时还没机会介入——内容根本没“溢出”，是容器被主动拉宽了。
常见现象：.grid { overflow: hidden; grid-template-columns: 1fr 1fr; }，一列放/very/long/file/path/that/never/wraps，整行依然横向滚动。
- 错误归因：以为
overflow写漏了或没生效 - 真实瓶颈：轨道没被压缩，
overflow连裁剪对象都没见到 - 关键点：
overflow控制的是“绘制后是否显示”，不是“布局时是否收缩”
minmax(0, 1fr)必须配min-width: 0才起效
minmax(0, 1fr)只是告诉轨道“可以缩到 0”，但网格直接子项默认有min-width: auto（等价于min-content），它会顶住不缩，轨道自然缩不动。
立即学习“前端免费学习笔记（深入）”；
必须同时改两处：
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);.grid > * { min-width: 0; }
若子项内部还有 Flex 或嵌套 Grid，其直接子元素也得加min-width: 0，否则溢出会传导上去。
真正该裁剪的对象是网格项自身，不是Grid容器
想让长文本、图片或内联内容不撑开轨道，裁剪动作要落在网格项（.grid > *）上，而不是 Grid 容器本身。
- 给网格项加
overflow: hidden+text-overflow: ellipsis+white-space: nowrap，才能截断文本 - 图片需配合
max-width: 100%和height: auto，否则overflow对<img alt="为什么在CSS Grid容器上设置overflow会导致布局被裁剪？" >无效（替换元素限制） - 避免在网格项上同时用
width: 100%和flex: 1，二者冲突可能导致尺寸计算异常
阴影消失？那根本不是布局问题，是BFC裁剪边界搞的鬼
如果你发现加了overflow: hidden后box-shadow被切掉，这不是布局逻辑出错，而是overflow: hidden触发了BFC，裁剪边界落在padding-box内边缘，而阴影画在border-box外——物理上就被砍了。
- 别在Grid容器上硬加
padding来“补阴影”，容易拉高轨道、挤坏align-items: stretch行为 - 更干净的解法：
overflow: clip（Chrome 107+/Firefox 111+/Safari 16.4+），它裁内容但不裁阴影 - 兼容旧浏览器？把
overflow: hidden移到网格项上，并确保该项有position: relative，再用clip-path兜底
最常被忽略的一点：DOM树上任意一层祖先，只要同时满足position ≠ static且overflow: hidden/auto/scroll，就可能成为裁剪源——别只盯着Grid容器看。用DevTools逐层关掉overflow，比猜值加padding快得多。
