商品详情页不能只用flex布局，因其需二维控制：左侧图文纵向堆叠且横向对齐，右侧价格区固定宽又需响应收缩；flex单轴流动易致错位、高度不一致及媒体查询套娃。
商品详情页为什么不能只用 flex 布局
因为商品详情页天然需要二维控制：左侧图文区要纵向堆叠但需横向对齐，右侧价格/操作区要固定宽度又得随屏幕收缩，而 flex 只能沿单轴流动。强行用 flex-wrap + calc() 会陷入媒体查询套娃和高度不一致问题——比如描述文字行数一变，右侧按钮就错位。
grid-template-columns 怎么写才真正自适应
关键不是“列数固定”，而是让列轨道自己决定能塞几列。直接写死 repeat(3, 1fr) 在手机上会把图片压成窄条；用 minmax(320px, 1fr) 又可能在中屏留白太多。正确写法是：
-
grid-template-columns: minmax(320px, 1fr) minmax(280px, 1fr)—— 左右两栏各自设最小宽，不强制等分 - 搭配
gap: 24px控制间距，比用margin更可靠（不会因子元素display: contents失效） - 避免用
auto-fit或auto-fill—— 商品详情页通常只有左右两块内容，不需要“自动填满多列”
图像和文字怎么对齐又不拉伸
常见错误是给 .product-image 直接设 width: 100%，结果图被压缩变形；或者用 object-fit: cover 却没限制容器高度，导致文字被顶出视口。正确做法：
- 图像容器（
.image-wrapper）设固定宽高比：aspect-ratio: 4/3，再加overflow: hidden - 图像本身用
object-fit: contain，保证完整显示且不裁剪 - 文字区域用
align-self: start防止被网格线居中挤到中间，尤其当图像高度变化时
移动端怎么让图文上下堆叠而不是左右挤在一起
别只靠 @media 改 grid-template-columns。更稳妥的是用 grid-template-areas 切换布局结构：
- 桌面端：
grid-template-areas: "image content" - 移动端：
grid-template-areas: "image" "content" - 配合
.image-wrapper { grid-area: image }和.text-content { grid-area: content } - 这样切换时，DOM顺序不变，无障碍阅读和 SEO 不受影响
容易被忽略的是：grid-template-areas 中的字符串必须用引号包裹，且每个单词之间用空格隔开——少一个空格或引号不匹配，整个网格就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
