应放弃用grid-template-rows控制奇偶行列数，改用grid-column: span配合:nth-child()选择器动态分配列宽，并在移动端重设列轨道数以适配。
grid-template-rows 无法控制“奇偶行列数不同”
直接写 grid-template-rows: repeat(odd, 1fr) 1fr; repeat(even, 2fr) 2fr; 是无效的——CSS 不支持在 repeat() 中用 odd/even 修饰行模式。grid-template-rows 定义的是**轨道高度**，不是每行放几个子项；列数变化本质是子项跨列逻辑，和行高无关。
真正要变的是每个子元素占几列，而不是“第几行该有几列”。所以必须放弃按行定义模板的思路，转为按子项位置动态分配 grid-column。
:nth-child(2n) 和 :nth-child(2n+1) 配合 span 控制列宽
这是最轻量、可扩展的解法：用选择器区分奇偶序号的子项，再分别指定跨列数。例如实现「奇数行3列、偶数行2列」的视觉节奏（即每行元素数交替），实际是让第1、2、3、7、8、9、13…个元素占2列，其余占3列（假设容器总列数为6）。
- 先设容器为
grid-template-columns: repeat(6, 1fr)—— 提供足够细粒度的列轨道 - 默认所有子项
grid-column: span 2（每行3个） - 对「应出现在偶数行开头」的元素，加规则：
:nth-child(6n + 4), :nth-child(6n + 5), :nth-child(6n + 6)→grid-column: span 3（每行2个）
为什么是 6n+4/5/6？因为 6 是 2 和 3 的最小公倍数，每6个元素构成一个完整循环：前3个撑满奇数行（3×2列=6），后3个组成偶数行（2×3列=6）。这样既不依赖 JS，又保持语义顺序。
用 grid-row-start 强制换行会破坏自动流，慎用
有人尝试给第4、7、10…个元素加 grid-row-start: 2 来“推到下一行”，但这会导致：
- 后续元素仍按自动流排布，可能插回第1行空隙里（尤其开启
grid-auto-flow: dense时） - 响应式断点一变，行数逻辑全乱——
grid-row-start是绝对线号，而移动端grid-template-columns变成repeat(2, 1fr)后，列线只剩3条，原grid-row-start: 2就失去意义 - 无法与
gap协同：gap 不产生新线，但视觉间距会干扰你对“第几行”的直觉判断
结论：只要目标是“视觉上奇偶行列数不同”，就别碰 grid-row-start，专注用 grid-column: span N + 位置选择器。
移动端适配时，列轨道数必须重算
桌面端用6列轨道（LCM of 2 & 3）很稳，但小屏若改成每行最多2列，就不能再沿用6列——否则 span 3 会占满1.5行，错位。
正确做法是媒体查询内重置轨道数：
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(4, 1fr); /* LCM of 2 & 2 → 其实就是2，但留余量 */
}
.container > div {
grid-column: span 2;
}
/* 所有元素统一2列，放弃交替，更符合小屏阅读习惯 */
}
别试图在小屏还维持“3→2→3→2”节奏——人眼横向视野有限，交替列数反而增加认知负担。视觉节奏的取舍，比技术实现更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
