本文介绍如何利用 CSS Grid 的 grid-auto-flow: dense 与 nth-child 选择器，在桌面端（≥768px）将交替的图文项重新排列为“右图左文”布局，同时保持移动端默认垂直流式顺序。
本文介绍如何利用 css grid 的 `grid-auto-flow: dense` 与 `nth-child` 选择器，在桌面端（≥768px）将交替的图文项重新排列为“右图左文”布局，同时保持移动端默认垂直流式顺序。
在构建响应式卡片式布局时，常见的需求是：移动端按 →
→ →
的自然顺序垂直堆叠；而在中大屏（如 ≥768px）下，希望每组图文以「右侧图片 + 左侧文字」的方式并排呈现（即第二行起，图片在右、文字在左），形成视觉节奏更丰富的栅格效果。
关键在于不改变 HTML 结构，仅通过 CSS 实现逻辑顺序重排。核心策略是：
- 移动端：所有 .item 占满 12 列（grid-column: span 12），自然流式排列；
- 桌面端：启用 grid-auto-flow: dense，允许网格项“回填”空缺轨道；
- 利用 :nth-child(4n-1) 和 :nth-child(4n) 精准定位每组中的第二个图文对（即第3、7、11…个
及其后紧跟的
），将其分别放置到右侧（第7–12列）和左侧（第1–6列）。
以下是完整可运行的实现方案：
.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; /* 默认占6列 */
}
/* 第3、7、11...项（即每组第二张图）→ 放到右侧 */
.item:nth-child(4n-1) {
grid-column: 7 / span 6;
}
/* 第4、8、12...项（即每组第二段文字）→ 放到左侧 */
.item:nth-child(4n) {
grid-column: 1 / span 6;
}
/* 启用密集填充，使被移位的项能自动填入可用空隙 */
.container {
grid-auto-flow: dense;
}
}
HTML 结构需保证图文严格交替且成对出现（建议至少 2 对以上以验证规律）：
<div class="container"> <div class="item"><img src="img1.jpg" alt="Image 1"></div> <div class="item"><p>Text 1</p></div> <div class="item"><img src="img2.jpg" alt="Image 2"></div> <div class="item"><p>Text 2</p></div> <div class="item"><img src="img3.jpg" alt="Image 3"></div> <div class="item"><p>Text 3</p></div> <!-- 更多图文对可继续添加 --> </div>
⚠️ 注意事项：
- grid-auto-flow: dense 是关键——它允许被显式定位的项（如 nth-child(4n-1)）跳过空轨道后，其余项仍能自动填补空白，避免大片留白；
- :nth-child(4n-1) 匹配第3、7、11…个子元素（即第2、4、6…组中的
），4n 匹配第4、8、12…个（对应
），该公式基于图文严格交替的前提；
- 若实际内容结构不规则（如插入广告、标题等），需调整伪类公式或改用 grid-area + 语义化类名（如 .image-right, .text-left）提升可维护性；
- 所有 .item 应具有明确高度或内容约束，避免因高度差异导致 dense 布局错乱。
此方案兼顾语义清晰、CSS 驱动、零 JS 依赖，是现代响应式网格重排的典型实践。
