应通过视觉层叠而非尺寸变化实现缩放：保持卡片网格尺寸固定，仅对内部图片用transform缩放并设z-index、overflow:hidden和will-change；同时用aspect-ratio+object-fit约束图片比例，配合focus-within替代hover，并用父容器aspect-ratio占位防抖动。
大图卡片缩放时布局跳变怎么办
直接对 .card 或 img 加 transform: scale() 会导致其他网格项在动画过程中不实时重排，出现“先放大、再整体挤开”的卡顿感。根本原因是 1fr 单位不会在动画帧间动态重计算空间分配。
解决办法不是禁用 transform，而是把缩放行为从“改变尺寸”转为“视觉层叠”，同时用 z-index 和 overflow: hidden 配合：
-
.card保持固定网格轨道尺寸，不设width/height动画 - 缩放只作用于
img或内部div，并加position: relative和z-index: 2 - 父卡片设
overflow: hidden，避免放大后溢出破坏网格间隙 - 用
will-change: transform提前告知浏览器该元素将动画，提升渲染效率
图片本身缩放失真或拉伸
常见现象是悬停放大后图片变形、边缘裁切异常，或小屏下高度塌陷。这不是 Grid 的问题，而是图片容器没约束比例。
必须同时满足三个条件：
立即学习“前端免费学习笔记（深入）”；
- 卡片子容器（如
<figure>或<div class="card-img">）设aspect-ratio: 4/3（按实际图比调整） - 内部
<img>写width: 100%; height: 100%; object-fit: cover;，不能只写width: 100% - 网格容器的
gap值要与minmax()最小值匹配——比如目标图宽 300px，gap: 1rem，就该设minmax(280px, 1fr)，否则缩放时列宽计算会错乱
移动端点击区域太小，缩放后难触发
iOS Safari 对 :hover 支持弱，且手指触控需要足够点击面积。纯 :hover 缩放在手机上基本无效。
改用 :active + focus-within 组合更可靠：
- 给卡片加
tabindex="0"，使其可聚焦 - CSS 中写
.card:active, .card:focus-within { transform: scale(1.05); } - 搭配
transition: transform 0.2s ease，避免 iOS 点击延迟导致动画滞后 - 注意：Safari 15.4+ 才完整支持
focus-within，旧版需 fallback 到 JS 监听touchstart
大图加载完成前布局抖动
图片未加载时高度为 0，加载后突然撑开，导致网格重排、卡片跳动。这不是缩放问题，但会放大缩放体验的割裂感。
关键不是等图片加载完再显示，而是提前占位：
- 给图片容器设明确
aspect-ratio（现代浏览器）或用padding-top百分比技巧（兼容 Safari 14 及以下） -
<img>必须带alt属性，否则部分屏幕阅读器和 SEO 工具会忽略占位逻辑 - 避免用
height: auto作为唯一高度控制——它依赖图片加载，不可预测；应配合min-height或容器aspect-ratio
真正难处理的是 aspect-ratio 在 Safari 中对替换元素（如 <img>）的支持不稳定，所以稳妥做法永远是对 <img> 的**直接父容器**设比例，而不是对 <img> 自身设。
