必须用 aspect-ratio 锁定容器比例 + transform: scale() 实现等比例放大，因 fr 是离散值不可过渡，且 Grid 无动态争空间能力；直接改 grid-template-columns 会导致跳变、错位、响应式失效。
不能只靠 grid-template-columns 或 fr 实现等比例放大，必须用 aspect-ratio 锁定容器比例 + object-fit 控制内容适配，否则放大后图片必然拉伸或裁剪失控。
为什么直接改 grid-template-columns 的 fr 值做不到等比例放大
fr 是布局阶段的静态分配单位，属于离散值（discrete），CSS 规范明确禁止对其做 transition。写 transition: grid-template-columns 0.3s 完全无效；用 JS 动态重写也会触发整行重排，导致跳变、错位、响应式失效。
- 浏览器不会对
1fr → 2fr进行插值计算，它要么是 1fr，要么是 2fr，中间没有过渡状态 - 即使成功“放大”某格，其他格子也不会自动收缩 —— Grid 不具备 flex-grow 那样的动态争空间能力
- 悬停时若还叠加了
minmax()或auto-fit，结果更不可控
真正可行的等比例放大：用 aspect-ratio + transform: scale()
这不是“欺骗”，而是符合现代 CSS 设计逻辑的解法：保持网格结构稳定，只对视觉层做局部变换。关键在于让放大后的元素仍维持原始宽高比，不挤压邻居。
- 给每个网格项（如
.grid-item）设aspect-ratio: 4 / 3，确保基础比例一致 -
.grid-item img必须配width: 100%; height: 100%; object-fit: cover（或contain） - 悬停时只对
.grid-item应用transform: scale(1.08)，并加overflow: hidden防溢出 - 务必设
z-index: 2和transition: transform 0.25s ease, z-index 0.1s，避免被遮挡或闪烁
容易踩的坑：放大后图片变形、留白、或边缘被切
问题几乎都出在 aspect-ratio 和 object-fit 的组合没对齐语义，或者遗漏了关键约束。
-
aspect-ratio必须设在网格项（.grid-item）上，不能设在 - 用了
object-fit: cover却没配width: 100%; height: 100%，object-fit直接失效 - 放大时未限制最大缩放倍数（比如
scale(1.3)），导致图片边缘被父容器overflow: hidden切掉太多 - 网格容器本身有
padding或gap，但没在开发者工具里检查实际可渲染区域，误判了缩放基准
移动端横竖屏切换时比例错乱怎么办
不是 aspect-ratio 失效，而是你依赖了固定像素值或没封住最小尺寸边界。
- 避免在
minmax()里写死minmax(240px, 1fr)—— 小屏下 240px 超过视口宽度，Grid 会强行压缩列宽，破坏比例 - 改用
minmax(clamp(200px, 25vw, 280px), 1fr)，让最小宽度随视口线性变化 - 横竖屏切换本质是容器尺寸突变，需加
@media (orientation: landscape)检查aspect-ratio是否被重算，必要时用min-height: 0防止 Grid 子项默认min-height: auto干扰高度结算
真正难的不是写对那几行 CSS，而是想清楚：你要的是视觉上的“突出”，还是逻辑上的“空间重分配”。前者用 transform 稳准快；后者非得用 JS 手动重算 grid-template-columns，还得处理 resize、焦点、无障碍等一连串副作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
