本文详解如何通过 CSS Grid 的 grid-auto-flow: dense 与 nth-child 选择器，让图文卡片在移动设备上垂直堆叠，在 ≥768px 屏幕中自动重排为“右图左文”交替布局，无需改变 HTML 结构。
本文详解如何通过 css grid 的 grid-auto-flow: dense 与
要实现「移动端单列堆叠、桌面端图文交错（第二行起：右侧图片 + 左侧文字）」的响应式网格重排序，核心在于利用 css grid 的自动填充流（dense packing） 和精确项定位能力，而非依赖 flexbox 或 javascript。
✅ 布局逻辑解析
- 移动端（默认）：所有 .item 占满 12 列（grid-column-start: span 12），自然垂直堆叠；
-
桌面端（≥768px）：
- 每个 .item 默认占 6 列（span 6），形成每行 2 栏；
- 关键技巧：用 :nth-child(4n-1) 定位第 3、7、11… 项（即每组图文对中的图片项），将其显式放置到右侧（第 7–12 列）；
- 用 :nth-child(4n) 定位第 4、8、12… 项（即每组图文对中的文字项），将其放置到左侧（第 1–6 列）；
- 必须启用 grid-auto-flow: dense —— 它允许 Grid 跳过空缺区域，将后续项“回填”到前面已留出的空位中，从而实现视觉顺序与 DOM 顺序分离。
? 完整可运行代码
.container {
display: grid;
gap: 20px;
grid-template-columns: repeat(12, 1fr);
}
.container > * {
grid-column: span 12; /* 移动端全宽 */
}
@media (min-width: 768px) {
.item {
grid-column: span 6; /* 桌面端基础宽度：半列 */
}
/* 图片项 → 放置到右侧（列 7–12） */
.item:nth-child(4n-1) {
grid-column: 7 / span 6;
}
/* 文字项 → 放置到左侧（列 1–6） */
.item:nth-child(4n) {
grid-column: 1 / span 6;
}
/* 启用密集填充，使项能回填空位 */
.container {
grid-auto-flow: dense;
}
}<div class="container"> <div class="item"><img src="image1.jpg" alt="Image 1"></div> <div class="item"><p>Text 1</p></div> <div class="item"><img src="image2.jpg" alt="Image 2"></div> <div class="item"><p>Text 2</p></div> <div class="item"><img src="image3.jpg" alt="Image 3"></div> <div class="item"><p>Text 3</p></div> <!-- 更多项可无限追加，规律自动延续 --> </div>
⚠️ 注意事项与最佳实践
- DOM 顺序必须严格交替：HTML 中需保持 <img> 在前、<p> 在后（即 1→2→3→4…），否则 nth-child(4n-1) 和 4n 的定位会错位；
- grid-auto-flow: dense 有副作用：若某些项被显式定位且位置冲突，Grid 可能打乱默认流顺序——因此仅建议用于可控的、规律性强的布局（如本例）；
- 为提升可维护性，可考虑添加语义类名（如 .item-image / .item-text），但本方案纯靠结构选择器，零侵入 HTML；
- 若内容动态加载或项数不固定，建议配合 :has()（现代浏览器支持）或 JS fallback 做兜底校验。
该方案轻量、纯 CSS、无 JS 依赖，完美契合渐进增强理念，是响应式图文网格重排序的经典实践。
