放大镜区域必须用 grid-template-areas 显式声明，不能仅靠 grid-area 设置；需在父容器定义命名区域，配合 minmax()/fr 弹性列、position: relative 定位上下文、display: none 隐藏及大小写敏感的区域名。
放大镜区域必须用 grid-template-areas 显式声明，不能靠 grid-area 后补
很多开发者以为给图片容器设 display: grid，再给子元素加 grid-area: "zoom" 就能生效——其实不行。CSS Grid 的命名区域必须在父容器上通过 grid-template-areas 预先定义，否则所有 grid-area 值都会被忽略。
典型错误写法：
img { grid-area: "zoom"; } /* 父容器没定义 template，这行无效 */
正确做法是：在商品图容器（比如 .product-gallery）上直接声明：
-
grid-template-areas: "main zoom" "main desc"—— 表示左列放主图，右列上半放放大镜，下半放描述 - 各子元素用
grid-area: "main"、grid-area: "zoom"、grid-area: "desc"对应 - 注意引号必须成对、空格分隔，换行可读但非必需
grid-template-columns 要按内容弹性分配，别写死 50%
响应式下，放大镜区域在小屏应隐藏或下移，大屏才并排；如果用 grid-template-columns: 50% 50%，小屏时放大镜会强行压缩变形，且无法用 @media 单独控制某区域位置。
推荐方案是用 minmax() + fr 组合：
- 桌面端：
grid-template-columns: minmax(300px, 1fr) minmax(280px, 0.8fr)，保证放大镜最小宽度不塌缩 - 平板横屏：
grid-template-areas: "main" "zoom" "desc"+grid-template-columns: 1fr，让三块垂直堆叠 - 手机竖屏：直接
grid-template-areas: "main" "desc"，把zoom区域设为display: none更省资源
放大镜容器需设置 position: relative，否则 transform 定位失效
放大镜浮层（通常是 .zoom-lens）要用 position: absolute 跟随鼠标移动，但它必须相对于其 Grid 区域容器定位，而不是整个页面或 body。
常见坑：
- 忘了给
grid-area: "zoom"的容器加position: relative，导致top/left偏移到视口左上角 - 在
grid容器里嵌套了flex或其他布局，打断了定位上下文 - 使用
transform: scale()放大原图时，没同步更新 lens 的background-position，造成偏移错位
关键 JS 逻辑片段（仅示意）：
lensEl.style.backgroundPosition = `-${x * scale}px -${y * scale}px`;
Grid 区域切换时，避免用 visibility: hidden 隐藏放大镜
visibility: hidden 仍占布局空间，会导致 grid-template-areas 在断点切换时出现空白列或错行；尤其当区域名数量不一致（如从 3 区变 2 区），Grid 引擎可能回退到隐式网格，破坏预期结构。
安全做法是：
- 用
display: none彻底移出文档流 - 确保每个断点下的
grid-template-areas字符串中，区域名总数和排列逻辑自洽（比如都保持 2 行，哪怕某行只写一个名字） - 若需过渡动画，改用
opacity+pointer-events: none配合transition，而非依赖 visibility
最易被忽略的是：Grid 区域名大小写敏感，"Zoom" 和 "zoom" 是两个不同区域，JS 动态插入时拼错一个字母，整个布局就静默失效，连 console 都不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
