CSS Grid 响应式重排：实现移动端堆叠及桌面端图文错位布局

本文介绍如何利用 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"><img src="image1.jpg" alt="Image 1"></div>  <div class="item"><p>Text block 1</p></div>  <div class="item"><img src="image2.jpg" alt="Image 2"></div>  <div class="item"><p>Text block 2</p></div>  <div class="item"><img src="image3.jpg" alt="Image 3"></div>  <div class="item"><p>Text block 3</p></div>  <!-- 可继续添加更多 img/text 对，规律自动延续 --></div>

⚠️ 注意事项：

• grid-auto-flow: dense 是实现该布局的必要条件，否则未被显式定位的项将被跳过，导致空白行；
• nth-child 计算基于 DOM 顺序，务必保证 HTML 中 <img> 与 <p> 严格交替，且无其他兄弟元素干扰；
• 若内容项总数非偶数，末尾单个元素仍会按规则定位（如只剩一个 <img>，它可能被 4n-1 匹配并置右）；
• 建议为图片添加 width: 100%; height: auto;，确保其在网格内自适应；文字容器可加 margin: 0; 避免默认段落间距破坏 gap 一致性。

该方案完全基于 CSS，零 JavaScript，语义清晰，兼容现代浏览器（Chrome/Firefox/Safari/Edge ≥ v16），是构建响应式图文卡片布局的简洁高效实践。

立即学习“前端免费学习笔记（深入）”；