最直观可维护的方式是用 grid-template-areas 配合 :nth-child() 动态设区域顺序：移动端统一 "image" "text"，桌面端奇数项 "image text"、偶数项 "text image"；子元素须显式声明匹配的 grid-area，缺位用 "." 占位。
用 grid-template-areas 实现桌面端左右交错 + 移动端堆叠
最直观、可维护性最高的方式是用命名区域，尤其适合每组固定含一张图和一段文字的 .feature 区块。关键不是“怎么让它们错开”，而是“怎么让奇偶组交换区域顺序”。
常见错误是直接在容器上写 grid-template-areas: "image text" 然后指望所有项自动对齐——这只会让全部图文挤在同一行。必须配合 :nth-child() 给每个 .feature 单独设模板：
- 移动端统一设为
grid-template-areas: "image" "text"（上下堆叠） - 桌面端用
@media分别控制：.feature:nth-child(odd)→"image text"，.feature:nth-child(even)→"text image" - 子元素必须显式声明
grid-area，且值要和引号内单词完全一致（大小写、拼写、有无空格都不能错） - 所有引号内每行单词数必须相同，缺位必须用
"."占位，否则整条声明被浏览器忽略
用 grid-column + :nth-child() 控制列位置（适合流式内容）
当图文项是平铺在同一个容器里（如 .features > .feature），而不是每组独立容器时，用列线定位更合适。前提是父容器已定义 grid-template-columns: repeat(12, 1fr)，否则 grid-column: 7 / span 6 这类写法无效。
容易踩的坑是写成绝对列号（如 grid-column: 1 / 2）导致响应式下错位；正确做法是用 span 声明宽度，再靠起始线微调：
-
.feature:nth-child(odd) { grid-column: 1 / span 6; }→ 奇数项占左半区（列 1–6） -
.feature:nth-child(even) { grid-column: 7 / span 6; }→ 偶数项占右半区（列 7–12） - 必须加
.features { grid-auto-flow: dense; }，否则空位不会被后续项回填，出现大片空白 - 图像元素需设
display: block; width: 100%; height: 100%; object-fit: cover;，否则默认内联行为会破坏高度对齐
为什么不用 grid-area 四值写法？
grid-area: 1 / 1 / 2 / 7 这类写法虽精准，但只适用于结构完全静态、数量固定的场景。官网 Feature 区块往往动态增减，硬编码行列线号会导致新增项“飘”到左上角或被截断。
更严重的问题是：没定义 grid-template-rows 时，grid-area: 2 / 1 / 4 / 3 中的第 4 条行线根本不存在，浏览器会静默降级为 auto，结果不可控。
除非你明确知道总共有几组、每组固定几行高，否则优先用 grid-template-areas 或 grid-column + span，避免线号失效风险。
图片不缩放、文字换行异常？检查这三个地方
交错布局中视觉断裂，90% 出现在图文尺寸失控。不是 Grid 不工作，而是子元素没约束：
- 图片必须设
max-width: 100%和height: auto，否则高分辨率图直接撑爆网格单元 - 文字容器若含长英文或数字，要加
word-break: break-word或overflow-wrap: break-word，否则溢出容器 - 所有图文项需设
align-self: start（默认是stretch），否则文字段落高度不一致会拉伸整行，破坏交错节奏
真正难的不是写对第一屏，而是保证加到第 10 组时，偶数项依然稳稳落在右侧——这意味着不能依赖视觉估算线号，得靠语义化区域名或可推演的 span 规则。一旦开始手动算第 13 列该从哪开始，就离维护噩梦不远了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
