本文介绍如何利用 CSS Grid 的 grid-auto-flow: dense 与 nth-child 伪类，在移动端保持垂直堆叠，而在 ≥768px 屏幕上将图片与文字交替错位排列（如文字左、图片右），实现语义化且无需 HTML 结构调整的响应式重排。
本文介绍如何利用 css grid 的 `grid-auto-flow: dense` 与 `nth-child` 伪类，在移动端保持垂直堆叠，而在 ≥768px 屏幕上将图片与文字交替错位排列（如文字左、图片右），实现语义化且无需 html 结构调整的响应式重排。
要实现“移动端全宽堆叠、桌面端图文左右错位”的布局效果，关键在于不改变 HTML 顺序的前提下，通过 CSS Grid 的自动流控制与精确项定位完成视觉重排。核心思路是：在小屏下所有 .item 占满 12 列（span 12），在 ≥768px 时将其设为双列（span 6），再利用 nth-child(4n-1) 和 nth-child(4n) 分别定位“第3、第7、第11…项”（即奇数位图片后紧跟的文字块）到右侧列，而“第4、第8、第12…项”（即偶数位文字块）强制置于左侧列——这恰好形成「文字左、图片右」的视觉节奏。
以下是完整、可直接运行的实现方案：
.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; /* 桌面端：默认占半列 */
}
/* 将第3、7、11...项（即第2组起的“文字”项）移至右侧列（第7–12列） */
.item:nth-child(4n - 1) {
grid-column: 7 / span 6;
}
/* 将第4、8、12...项（即第2组起的“图片”项？注意：实际需校准）→ 更正：原答案逻辑有歧义 */
/* ✅ 正确理解：HTML 中 item 顺序为 [img, text, img, text, ...]，索引从1开始 */
/* 所以：item[1]=img, [2]=text, [3]=img, [4]=text, [5]=img, [6]=text... */
/* 因此 nth-child(4n-1) → 3,7,11... 是 img；nth-child(4n) → 4,8,12... 是 text */
/* 但需求是「图片在右、文字在左」——所以应让 text（4n）在左（col 1–6），img（4n-1）在右（col 7–12） */
.item:nth-child(4n) {
grid-column: 1 / span 6; /* 文字放左 */
}
.item:nth-child(4n - 1) {
grid-column: 7 / span 6; /* 图片放右 */
}
/* 关键！启用密集填充，允许 Grid 自动填补因手动定位产生的空缺 */
.container {
grid-auto-flow: dense;
}
}
<div class="container"> <div class="item">@@##@@</div> <div class="item"><p>Text block 1</p></div> <div class="item">@@##@@</div> <div class="item"><p>Text block 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 block 3</p></div> <!-- 可继续添加更多 img/text 对，规律自动延续 --> </div>
⚠️ 注意事项：
- grid-auto-flow: dense 是实现该布局的必要条件，否则未被显式定位的项将被跳过，导致空白行；
- nth-child 计算基于 DOM 顺序，务必保证 HTML 中
与 严格交替，且无其他兄弟元素干扰；
- 若内容项总数非偶数，末尾单个元素仍会按规则定位（如只剩一个
，它可能被 4n-1 匹配并置右）； - 建议为图片添加 width: 100%; height: auto;，确保其在网格内自适应；文字容器可加 margin: 0; 避免默认段落间距破坏 gap 一致性。
该方案完全基于 CSS，零 JavaScript，语义清晰，兼容现代浏览器（Chrome/Firefox/Safari/Edge ≥ v16），是构建响应式图文卡片布局的简洁高效实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
