响应式卡片网格布局的核心是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，其中auto-fit收缩空轨道避免留白，minmax确保单列不窄于280px且等宽自适应，gap统一控间距，无需媒体查询即可覆盖320px–2560px设备宽度。
直接用 transform: translateY() + transition，别碰 margin-top 或 top —— 后者会触发重排，一卡一个准。
为什么 hover 上移必须用 transform 而不是 margin
浏览器对 transform 属于合成层操作，走 GPU 加速，动画顺滑；而改 margin-top 或 top 会强制重排（reflow），尤其在卡片网格中滚动或悬停时，低端设备或长列表里极易掉帧、抖动。
-
transform: translateY(-4px)是上浮标准写法，数值建议 -4px 到 -8px，再大容易和上方元素重叠 - 必须显式声明
transition: transform 0.3s ease，部分 Chrome 版本不写会延迟生效 - 可加
will-change: transform（仅对大量卡片列表有轻微优化，非必需） - 如果卡片内有文字或图标“跳动”，检查子元素是否用了
vertical-align: baseline（默认值），统一改成vertical-align: top或改用display: flex
响应式卡片布局怎么保证每行列数自动适配
核心就一句：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))。这不是“大概能换行”，而是让浏览器根据容器宽度实时计算最大列数，并确保每列等宽、不压扁文字、不横向滚动。
-
minmax(280px, 1fr)：单列最小 280px（保障文字可读），超出部分均分（1fr） - 用
auto-fit，不是auto-fill—— 前者会收缩空轨道，后者保留空白列，小屏下易留白错位 - 间距必须用
gap: 1.5rem，别混用margin，否则外边距合并 + Grid 轨道错乱 - IE11 不支持
auto-fit，但市占率已低于 0.03%，无需降级
图片怎么避免加载抖动导致卡片高度跳变
图片加载前高度为 0，加载后突然撑开，会破坏卡片等高布局和悬停位置。关键在提前预留空间。
立即学习“前端免费学习笔记（深入）”；
- 给图片容器（如
.card__img）设固定宽高比：aspect-ratio: 16/9（现代浏览器支持良好） - fallback 方案：用
padding-top: 56.25%+position: relative+ 绝对定位图片（兼容旧版 Safari） - 图片本身加
object-fit: cover防止拉伸变形 - 禁用
height: auto直接设高 —— 容易被文字内容顶破，破坏 flex 布局的等高逻辑
移动端 hover 失效怎么办
iOS 和 Android 真机基本不触发 :hover，纯 CSS 方案在触摸设备上等于没写。
- 别依赖
:hover做核心交互，比如“悬停才显示按钮”——这会让触摸用户完全无法操作 - 若必须模拟（如预览态），用 JS 添加
is-hovered类，但要在touchstart后加setTimeout(..., 150ms)判断是否为长按，防误触 - 更稳妥的做法：把悬停效果降级为点击展开（用
details/summary或 JS 控制 class），或直接默认展示关键信息 - 测试时务必在真机 Safari / Chrome 上验证，模拟器 hover 行为不可信
真正难的不是让卡片动起来，而是动得稳、动得准、动得不干扰其他交互——尤其是混合了图片懒加载、阴影展开、文字截断的卡片，transform 的层级和渲染行为得反复调。
