用 grid-template-areas 可稳定划分语义区块，移动端按“hero”“title”“price”等线性排列保障可访问性，桌面端仅修改字符串即可重排布局，图文混排需 dense 模式+显式跨列，主体内容须约束宽度并居中。
直接用 grid-template-areas 划分语义区块，比堆 flex 或硬写 order 断点更稳——它把“主图”“参数表”“图文详情”这些设计稿里的天然区域，直接映射成可维护的 CSS 布局单元。
用 grid-template-areas 定义移动端线性结构
商品详情页不是流式内容，而是有明确视觉层级的区块集合。移动端必须从上到下严格按阅读顺序排列，否则语义和可访问性都会出问题。
- 每个区块（如
.hero、.specs）必须显式设置grid-area: hero等，否则grid-template-areas的字符串只是空壳 - 移动端默认写成
"hero" "title" "price" "specs" "desc" "related"，每行一个引号，用换行分隔 - 别把所有内容塞进一个容器却不分配
grid-area——结果就是所有区块挤在第一行，加order一动就错位 -
grid-template-areas值里不能有空格或拼写错误，"hero title"和"hero title"效果完全不同
桌面端只改 areas 值，不碰 HTML 顺序
桌面端重排布局时，真正要改的只有 grid-template-areas 的字符串值，HTML 结构和子元素的 grid-area 保持不变。这样断点切换才可控，不会因 order 错乱导致视觉跳变。
- 例如桌面端改成
"hero hero hero" "title title price" "specs specs price" "desc desc desc" "related related related" - 主图跨三列，标题和价格并排，参数表和价格对齐——这些都靠修改字符串实现，无需 JS 或额外 class
- 如果某区块在桌面端要隐藏（比如移动端显示的“客服入口”），直接从字符串里删掉对应名字，再配
display: none即可 - 注意：
grid-area名字必须和字符串中完全一致，大小写、连字符都不能错
图文混排区用 grid-auto-flow: dense + 显式跨列
“一段文字 + 一张大图 + 两段文字 + 三张小图”这类非对称内容，光靠 auto-fit 会卡死空隙，图片被拉宽或换行错位。dense 模式配合手动控制关键项跨度，才是解法。
- 给图文容器设
grid-auto-flow: dense，允许网格项跳过空位填充 - 大图用
grid-column: span 2或grid-column: 1 / -1显式跨列，小图用grid-column: span 1让 dense 自动填空 -
grid-auto-flow: dense不保证 DOM 阅读顺序，所以语义顺序必须靠 HTML 结构保障，CSS 只管视觉层 - 避免对所有项都设
grid-column——控制锚点元素即可，其余交给 dense 填充，否则容易漏写、难维护
主体内容区宽度必须显式约束
1fr 不等于“适合阅读的宽度”。2560px 屏幕下，纯 1fr 会让段落拉到 2400px，小屏又可能塌缩成窄条。中间列必须加 max-width 和居中逻辑。
- 推荐三列结构：
grid-template-columns: minmax(300px, 1fr) 1fr minmax(300px, 1fr) - 主体内容放进中间列后，再加
max-width: 800px和margin: 0 auto - 用
grid-column: 2 / -2确保内容跨中列且避开最右轨道线，防止右侧留白被吞 - 别用
fit-content(800px)单独一列——内容短时列宽会塌缩到几像素，排版直接断裂
最容易被忽略的是：图文混排区的 grid-auto-flow: dense 必须和 HTML 语义顺序强绑定；一旦为了视觉效果把图片标签写在文字后面，屏幕阅读器就会先读图再读文——这不是 bug，是设计选择，得提前想清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
