本文详解如何通过 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">@@##@@</div> <div class="item"><p>Text 1</p></div> <div class="item">@@##@@</div> <div class="item"><p>Text 2</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div> <div class="item">@@##@@</div> <div class="item"><p>Text 3</p></div> <!-- 更多项可无限追加，规律自动延续 --> </div>
⚠️ 注意事项与最佳实践
-
DOM 顺序必须严格交替：HTML 中需保持
在前、在后（即 1→2→3→4…），否则 nth-child(4n-1) 和 4n 的定位会错位；
- grid-auto-flow: dense 有副作用：若某些项被显式定位且位置冲突，Grid 可能打乱默认流顺序——因此仅建议用于可控的、规律性强的布局（如本例）；
- 为提升可维护性，可考虑添加语义类名（如 .item-image / .item-text），但本方案纯靠结构选择器，零侵入 HTML；
- 若内容动态加载或项数不固定，建议配合 :has()（现代浏览器支持）或 JS fallback 做兜底校验。
该方案轻量、纯 CSS、无 JS 依赖，完美契合渐进增强理念，是响应式图文网格重排序的经典实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
