用 grid-column 实现图文交错本质是让相邻项在列轨道上交替占位，需配合 :nth-child() 和 span 声明宽度；grid-template-areas 更语义化但需严格匹配区域名与引号内单词数；图像需 display: block + width/height: 100% + object-fit 才可控；响应式错乱应将交错逻辑下沉至每个单元内部。
用 grid-column 控制单个图文项的左右位置
交错排列的本质是让相邻项在列轨道上交替占据左/右区域，而不是靠 flex-direction: row-reverse 这类 flex 技巧——Grid 里它不生效。最直接的方式是给每个子元素显式设置 grid-column，配合 :nth-child() 选择器。
常见错误是写成 grid-column: 1 / 2 这种绝对定位，结果在响应式下失效；正确做法是用 span 声明占位宽度，再用起始列线微调：
-
.item:nth-child(odd) { grid-column: 1 / span 6; }→ 奇数项放左侧（占前6列） -
.item:nth-child(even) { grid-column: 7 / span 6; }→ 偶数项放右侧（从第7列开始占6列） - 前提是父容器已设
grid-template-columns: repeat(12, 1fr)，否则列线编号无意义
用 grid-template-areas 实现语义化交错布局
当图文结构固定（比如每组都含一个 .image 和一个 .text），grid-template-areas 比数字定位更直观、更易维护。关键在于：命名区域必须和子元素的 grid-area 完全匹配，且每行单词数一致。
移动端堆叠、桌面端交错的写法示例：
/* 移动端：上下堆叠 */
.feature {
display: grid;
grid-template-areas: "image" "text";
}
/* 桌面端：左右交错 —— 注意这里用了两行不同模板 */
@media (min-width: 768px) {
.feature:nth-child(odd) {
grid-template-areas: "image text";
}
.feature:nth-child(even) {
grid-template-areas: "text image";
}
}
.feature__img { grid-area: image; }
.feature__content { grid-area: text; }
⚠️ 容易踩的坑：grid-template-areas 中不能有空格或换行错位，所有行引号内单词数必须相同，缺位必须用 "." 占位，否则整个声明会被浏览器忽略。
图片溢出或拉伸时，object-fit 和 display 必须配合使用
交错布局中，图像常因默认 inline 行内行为导致基线偏移、高度塌陷或撑破网格轨道。单纯设 width: 100% 不够，它会强制等比缩放但可能留白；设 height: 100% 又容易拉伸变形。
真正可控的做法是三件套组合：
- 给
<img>加display: block，消除 inline 基线干扰 - 设
width: 100%; height: 100%，让图片填满所在网格区域 - 加
object-fit: cover（填满不拉伸）或contain（完整显示不裁剪），根据设计需求选
如果只加 object-fit 但没设宽高，它不会生效；如果没加 display: block，在某些 Grid 轨道中仍会出现顶部/底部多出几像素空白。
响应式断点下交错顺序错乱，问题往往出在 grid-auto-flow
当用 auto-fit 或 auto-fill 动态生成列数时，交错逻辑可能被破坏——比如桌面端本该奇左偶右，但屏幕略窄时变成单列，:nth-child() 仍按原始 DOM 顺序计算，导致视觉上“交错”变“堆叠错序”。
解决思路不是禁用自动列，而是把交错逻辑下沉到每个 .feature 容器内部：
- 每个图文单元自己是独立
display: grid容器 - 用
grid-template-areas在单元内控制图/文位置 - 外层只负责分栏（如
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))），不干预内部顺序
这样即使外层从两列退化为一列，每个单元内的图/文关系依然稳定，不会出现“第一项图在左、第二项图还在左”的错觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
