grid容器加border-radius和overflow:hidden无效，裁剪必须作用于网格项自身：需在网格项上同时设置border-radius（推荐50%配aspect-ratio:1/1）和overflow:hidden；防撑破还需minmax(0,1fr)轨道定义与子项min-width:0配合。
给 Grid 容器加 border-radius 和 overflow: hidden 是无效的——圆角裁剪必须作用于网格项自身，且内容溢出需从轨道定义层 + 子项样式双重防御。
圆角必须加在网格项（grid item）上，不是容器
Grid 容器的 overflow: hidden 对子项完全无裁剪效果；border-radius 也只影响容器自身背景/边框，不裁剪子元素。真正起作用的是每个网格项（比如 <div class="grid-item">）必须同时具备：
<ul>
<li>
<code>border-radius（推荐用 50% 配合正方形尺寸）
overflow: hidden（强制裁剪子内容，如图片、文字）<img> 作网格项，旧版 Safari 可能忽略其 overflow，更稳妥是套一层 <div> 作为网格项，再把图片放进去
<h3>防止内容撑破网格的关键：minmax(0, 1fr) + min-width: 0</h3>
<p>仅写 <code>grid-template-columns: 1fr 1fr 时，长文本、URL 或图片会触发 min-content 行为，强行拉宽整列。必须显式释放收缩能力：
- 轨道定义改用
minmax(0, 1fr)，例如：grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) - 网格直接子元素（即每个
.grid-item）必须设min-width: 0——漏掉这步，minmax(0, 1fr)就形同虚设 - 嵌套了
display: flex或display: grid的子项，其内部直系子元素也得加min-width: 0，否则撑破会传导
正方形圆角图片的稳定写法：aspect-ratio + object-fit
想让图片在网格项里呈现完美圆形或圆角正方形，不能靠固定 px 值的 border-radius，而要先统一尺寸逻辑：
- 网格项设
aspect-ratio: 1 / 1（现代浏览器），或用padding-top: 100%+position: relative兼容老版本 - 图片设
width: 100%; height: 100%; object-fit: cover（填满裁剪）或contain（完整显示） - 圆角统一用
border-radius: 50%，此时因宽高严格相等，弧度才自然对称 - 避免用
fr单位定义轨道后配固定border-radius: 16px——小屏下圆角会过重，大屏下几乎不可见；可用clamp(8px, 2.5vw, 16px)响应式控制
Safari 下的 overflow + transform 失效问题
如果网格项用了 transform（比如 hover 缩放、动画），再叠加 overflow: hidden，Safari（尤其 15.x 及更早）可能完全失效，圆角裁剪消失：
- 首选替代方案是
clip-path: circle(50% at 50% 50%)（圆形）或clip-path: inset(0 round 16px)（圆角矩形），它不受transform影响 - 若需兼容 IE 或极老 Safari，只能降级为 JS 测量 + canvas 裁剪，但实际项目中已极少需要
- 测试时务必在真机 Safari 上验证，开发者工具里的模拟常不准
最易被忽略的一点：所有这些防护（minmax(0, 1fr)、min-width: 0、overflow: hidden、aspect-ratio）必须在同一渲染周期内生效；DOM 插入后立即读取尺寸或触发重排前就加样式，否则 Safari 和部分安卓 WebView 会漏掉第一帧裁剪。
