grid-template-areas 是更稳定易维护的布局方案，直接映射设计稿视觉结构，改布局只需修改一行声明；图文混排需配合 grid-auto-flow: dense 和显式跨列控制，主体内容须用可控宽度与 max-width 保障阅读体验。
直接用 grid-template-areas 划分区块，比堆 flex 或硬写 order 断点更稳、更易维护——它把设计稿的视觉结构直接映射成 CSS，改布局只动一行声明，不碰 HTML 顺序。
用 grid-template-areas 定义语义化区块顺序
商品详情页不是“流式内容”，而是天然分块：主图、标题、价格、参数表、图文详情、相关推荐。移动端默认线性堆叠，桌面端再重排视觉关系。
- 移动端写法：
grid-template-areas: "hero" "title" "price" "specs" "desc" "related" - 桌面端只需改这一行：
grid-template-areas: "hero hero hero" "title title price" "specs specs price" "desc desc desc" "related related related" - 每个区块必须显式设
grid-area，比如.hero { grid-area: hero; }，漏设等于没定义区域 - 别把所有内容塞进一个
display: grid容器却不分配grid-area——结果就是所有元素挤在左上角第一格
图文混排区启用 grid-auto-flow: dense
“一段文字 + 一张大图 + 两段文字 + 三张小图”这类非对称内容，仅靠 repeat(auto-fit, minmax(300px, 1fr)) 会留白或错行，图片被拉宽、换行错位。
- 给图文容器加
grid-auto-flow: dense，允许网格项跳过空位自动填充 - 关键元素（如大图）用
grid-column: span 2或grid-column: 1 / -1显式跨列 - 只控制锚点元素的列跨度，其余让
dense自动填空，避免全量写grid-column -
grid-auto-flow: dense不保证阅读顺序，语义和 SEO 仍靠 HTML 结构保障
主体内容宽度必须可控，不能只靠 1fr
grid-template-columns: 1fr 或 1fr 1fr 在 2560px 屏幕上会让文字撑到 1200px，阅读体验崩坏；小屏又可能缩成窄条。
立即学习“前端免费学习笔记（深入）”；
- 用三列结构：
grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr) minmax(300px, 1fr) - 把实际内容放进中间列，并加
max-width: 800px; margin: 0 auto; - 用
grid-column: 2 / -2确保内容跨中列且避开最右轨道线，防止右侧留白被吞 - 别用
fit-content(800px)单独一列——内容短时列宽塌缩到几像素，排版断裂
容易被忽略的关键点
图文混排的“视觉交错”和“语义顺序”必须分离处理：dense 流只管视觉层回填，HTML 结构顺序决定屏幕阅读器路径和 SEO 权重。这两者不能混为一谈，也不能靠 order 或 JS 重排去补救。另外，父容器缺乏高度约束、子项内 <img> 的 min-height: auto 干扰，都会让 Grid 布局表现失常——这些细节不处理，其他设置全白搭。
