商品详情页图文宫格排版需用grid-template-areas定义语义区域，移动端线性堆叠，桌面端重定义区域实现双列布局，图文混排区启用grid-auto-flow:dense并配合显式跨列，主体内容约束宽度并居中，确保语义与视觉分离。
商品详情页的图文宫格排版，不是把图片和文字塞进固定格子就行，而是要兼顾语义结构、视觉节奏与响应式容错。关键在于：用轨道控制空间，用区域表达意图，用 dense 流处理非对称内容。
用 grid-template-areas 定义语义区块
先按设计逻辑划分核心区域，比如主图（hero）、标题（title）、价格（price）、参数表（specs）、图文描述（desc）、相关推荐（related）。移动端默认线性堆叠：
- 写成 grid-template-areas: "hero" "title" "price" "specs" "desc" "related"
- 每个区块必须显式声明 grid-area，例如
.hero { grid-area: hero; } - 不设 grid-area 的元素会挤在左上角第一格，布局直接失效
桌面端双列靠重定义区域，不改 HTML 顺序
桌面端只需修改 grid-template-areas 一行，视觉结构就切换，无需 JS 或重排 DOM：
- 比如 "hero hero" "title price" "specs specs" "desc desc" "related related"
- 主图跨两列，标题与价格并排，参数表占满整行，图文与推荐各自独占一行
- HTML 结构保持语义顺序（利于 SEO 和读屏器），视觉层由 CSS 独立控制
图文混排区启用 grid-auto-flow: dense
一段文字 + 一张大图 + 两段文字 + 三张小图这类内容，不能靠 auto-fit 自动分列——容易留白或错行：
- 给图文容器设 grid-auto-flow: dense，允许项跳过空位回填
- 关键锚点元素（如大图）加 grid-column: span 2 或 grid-column: 1 / -1 显式跨列
- 其余文字段不设定位，让 dense 自动填充剩余空间，避免手动写满所有 grid-column
主体内容宽度必须主动约束
只写 grid-template-columns: 1fr 1fr 或 1fr 会导致极端屏幕下文字过宽或过窄：
- 推荐三列结构：grid-template-columns: minmax(300px, 1fr) 1fr minmax(300px, 1fr)
- 把图文内容放进中间列，并加 max-width: 800px; margin: 0 auto;
- 用 grid-column: 2 / -2 确保内容避开最右轨道线，防止右侧留白被吞
不复杂但容易忽略：图文交错是视觉层的事，语义顺序是 HTML 的事，两者必须分离。dense 只管怎么“摆”，HTML 顺序才决定“读什么”和“搜什么”。
